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。