Friday, August 23, 2013

@Ajax.Actionlink ASP MVC

This HTML helper offers the possibility to create ajax requests by writing less code than in a jquery classical way. I spent some time trying to integrate this pretty feature in my application and I want to share with you how tot this very quickly. So, I want to show how set the Http method, the parameters and other options.

 First I will present an action from the previous tutorial(where I used mongo). The action provides details for a book(attributes name and publisher) and is returning a JSON if the book exists, else just simple message.

        [HttpPost]
        public ActionResult Details(string id)
        {
            try
            {
                var book = repBook.findById(id);

                return Json(book);
            }
            catch(Exception e)
            {
                return Content("not found");
            }
        }
Then let's try to create an ajax request in Index view to display some information about a book. Very simple...
@model IEnumerable

@{
    ViewBag.Title = "Index";
}

Index

@Html.ActionLink("Create New", "Create")
@foreach (var item in Model) { }
@Html.DisplayNameFor(model => model.name) @Html.DisplayNameFor(model => model.publisher)
@Html.DisplayFor(modelItem => item.name) @Html.DisplayFor(modelItem => item.publisher) @Html.ActionLink("Edit", "Edit", new { id=item.Id }) | @*@Html.ActionLink("Details", "Details", new { id=item.Id }) |*@ @Html.ActionLink("Delete", "Delete", new { id=item.Id }) @{ var options = new AjaxOptions { UpdateTargetId = item.name, InsertionMode = InsertionMode.Replace, OnSuccess = "success(data," + item.name + ")", OnFailure = "failure()", HttpMethod = "Post" }; } @Ajax.ActionLink("Ajax details","Details",new {id="fdsf"},options)
@section scripts{ }
And that's all! ASP.NET MVC, .Net, MVC, HTML helpers, Ajax, @Ajax.ActionLink, JSON, JsonResult

No comments:

Post a Comment