MVC 3 Ajax.ActionLink了解一些

Question

所以我是新手，我有一个Ajax.ActionLink可以正常工作，但无法理解（为什么我必须将div“ linkEdit”放在列表视图和局部视图中）

因此将Ajax.ActionLink放在解决方案的列表视图中（当选择解决方案时，它将获得所有产品），然后执行操作以

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

Ajax.ActionLink

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

我在部分视图“ SolutionProduct”和列表视图中有此div

<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>

所以我的问题是为什么如果我将div放在列表视图中不起作用？

Answer 1

我将在这里分享在ASP .NET MVC 4中使用AJAX的不同示例。

1）使用Internet应用程序模板在Visual Studio 2012中创建ASP .NET MVC 4项目。

2）在文件夹Models创建此简单类

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

3）将以下代码添加到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）用以下代码替换Index.cshtml所有代码（也许不是MvcApplication1 ，而是必须使用真实的应用程序名称...）

@model MvcApplication1.Models.Person

@ {ViewBag.Title =“主页”; } @section精选{}

MethodWithoutParameters
MethodWithParameters'参数00001'

@using（Ajax.BeginForm（“ PerformAction”，“ Home”，新的AjaxOptions {InsertionMode = InsertionMode.Replace，HttpMethod =“ POST”，OnSuccess =“ OnSuccess”，OnFailure =“ OnFailure”}））{

这是一个演示表单1。

@ Html.LabelFor（model => model.FirstName）@ Html.TextBoxFor（model => model.FirstName，null，新的{@class =“ labelItem”}）}

@using（Ajax.BeginForm（“ PerformAction2”，“ Home”，新的AjaxOptions {InsertionMode = InsertionMode.Replace，HttpMethod =“ POST”，OnSuccess =“ OnSuccess2”，OnFailure =“ OnFailure2”}））{

这是一个演示表单2。

@ Html.LabelFor（model => model.FirstName）@ Html.TextBoxFor（model => model.FirstName，null，新的{@class =“ labelItem”}）}

cat.png删除文件

函数DeleteFile（）{var fn = $（'＃fileNameLabel'）。html（）; $ .ajax（{url：“ Home / DeleteFile”，//检查调试器中的this.href dataType：“ text json”，type：“ POST”，数据：{fileName：fn}，//在此处传递参数成功：函数（data，textStatus）{if（data）{if（textStatus =='success'）{$（'＃fileNameLabel'）。html（data）; $（'＃btnDeleteFile'）。hide（）;} else {alert （'error'）;}} else {alert（'error'）;}}}）; }函数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）确保_Layout.cshtml的标题看起来像

  <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")" 

类型= “文本/ JavaScript的”>

6）一切都应该正常工作。

希望所有这些样本对您有所帮助！

Answer 2

您必须将id为“ linkEdit”的div放入列表视图中，因为这是页面的一部分，该部分将被ajax链接返回的结果替换。

ASP.NET AJAX使Web应用程序能够异步地从服务器检索数据并更新现有页面的某些部分 。 通过使Web应用程序更具响应性，从而改善了用户体验。

在这种情况下，您正在使用InsertionMode

 InsertionMode = InsertionMode.Replace

因此在列表视图和部分视图中都需要一个ID为“ linkEdit”的div。