MVC 3 Ajax.ActionLink了解一些

Question

so Iam new on this and I have a Ajax.ActionLink that work fine but can't understand (why I have to put the div "linkEdit" in my list view and in the partial view)

so have Ajax.ActionLink in my list view of solution (and when select a solution it get me all the product) and it goes to a action to

 [HttpGet]
        [Ajax(true)]
        [ActionName("Index")]
        public ActionResult Index_Ajax(Int32? id)
        {
            // to do  = load the product that solution have 
 return PartialView("SolutionProduct", viewModel);
        }

the Ajax.ActionLink

 @Ajax.ActionLink("Select", "Index", "solution",
                      new { id = item.solutionId },
                      new AjaxOptions
                      {
                          HttpMethod = "GET",
                          UpdateTargetId = "linkEdit",
                          InsertionMode = InsertionMode.Replace
                      })|

i have this div in a partial view "SolutionProduct" and in my list view

<div id="linkEdit">
<table> 
    <tr> 
        <th>Nombre de Producto</th>    
    </tr> 

    @foreach (var item in Model.Productos)
    { 

    <tr > 
        <td> 
            @item.Nombre 
        </td> 
    </tr> 
    } 

</table> 
}
</div>

so my question would be why if I take out the div on my list view it doesnt work?

Answer 1

I am going to share here different examples of using AJAX in ASP .NET MVC 4.

1) Use an Internet Application template to create ASP .NET MVC 4 project in Visual Studio 2012.

2) Under the folder Models create this simple class

public class Person
{
   public string FirstName { set; get; }
}

3) Add following code to public class HomeController : Controller

[AcceptVerbs("POST")]
    public bool MethodWithoutParameters()
    {
        bool allow = true;

        if (allow)
        {
            return true;
        }
        else
        {
            return false;
        }
    }

    [AcceptVerbs("POST")]
    public string MethodWithParameters(string id)
    {         
            return id + " i got it, man! ";           
    }

    [AcceptVerbs("GET")]
    public ActionResult GetSomeName()
    {
        var data = new { name = "TestName " };

        return Json(data, JsonRequestBehavior.AllowGet);
    }

    [AcceptVerbs("POST")]
    public ActionResult PerformAction(FormCollection formCollection, Person model)
    {
        model.FirstName += "Well done! Form 1";

        return Json( model.FirstName);
    }

    [AcceptVerbs("POST")]
    public ActionResult PerformAction2(FormCollection formCollection, Person model)
    {
        model.FirstName += "Well don! Form 2";
        return Json(model.FirstName);
    }

    public JsonResult DeleteFile(string fileName)
    {
        var result = fileName + " has been deleted";
        return Json(result, JsonRequestBehavior.AllowGet);
    } 

4) Replace all code within Index.cshtml with the following one (Perhaps, instead of MvcApplication1 you have to use your real application name...)

@model MvcApplication1.Models.Person

@{ ViewBag.Title = "Home Page"; } @section featured { }

MethodWithoutParameters
MethodWithParameters 'parameter00001'

@using (Ajax.BeginForm("PerformAction", "Home", new AjaxOptions { InsertionMode = InsertionMode.Replace, HttpMethod = "POST", OnSuccess = "OnSuccess", OnFailure = "OnFailure" })) {

This is a demo form1.

@Html.LabelFor(model => model.FirstName) @Html.TextBoxFor(model => model.FirstName, null, new { @class = "labelItem" }) }

@using (Ajax.BeginForm("PerformAction2", "Home", new AjaxOptions { InsertionMode = InsertionMode.Replace, HttpMethod = "POST", OnSuccess = "OnSuccess2", OnFailure = "OnFailure2" })) {

This is a demo form2.

@Html.LabelFor(model => model.FirstName) @Html.TextBoxFor(model => model.FirstName, null, new { @class = "labelItem" }) }

cat.png Delete File

function DeleteFile() { var fn = $('#fileNameLabel').html(); $.ajax({ url: "Home/DeleteFile", //check this.href in debugger dataType: "text json", type: "POST", data: { fileName: fn }, //pass argument here success: function (data, textStatus) { if (data) { if (textStatus == 'success') { $('#fileNameLabel').html(data); $('#btnDeleteFile').hide(); } else { alert('error'); } } else { alert('error'); } } }); } function OnSuccess(response) { $('#form1').html(response); }

 function OnFailure2(response) { alert("Error Form 2"); } function OnSuccess2(response) { $('#form2').html(response); } function OnFailure(response) { alert("Error Form 1"); } function MethodWithoutParameters() { var url = "Home/MethodWithoutParameters"; $.post(url, function (data) { if (data) { alert(data); } else { alert('error'); } }); } function MethodWithParameters(id) { var url = "Home/MethodWithParameters/" + id; // alert(url); $.post(url, function (data) { if (data) { alert(data); } else { alert('error'); } }); } $(document).ready(function () { $.getJSON("Home/GetSomeName", null, function (data) { if (data) { $('#UserNameLabel').html(data.name); } else { alert('error'); } } ); }); </script> 

5) Make sure that header of the _Layout.cshtml looks like

  <meta charset="utf-8" /> <title>@ViewBag.Title - My ASP.NET MVC Application</title> <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /> <meta name="viewport" content="width=device-width" /> @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr") @Scripts.Render("~/bundles/jquery") <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" 

type="text/javascript">

6) And everything should work fine.

I hope all those samples will help you!

Answer 2

You have to put the div with an id of "linkEdit" into your list view as that is the portion of the page that is to be replaced by the result returned by the ajax link.

ASP.NET AJAX enables a Web application to retrieve data from the server asynchronously and to update parts of the existing page. This improves the user experience by making the Web application more responsive.

And is this case you are using the InsertionMode

 InsertionMode = InsertionMode.Replace

so you will need a div with the id of "linkEdit" in both your list view and partial view.