c# - MVC 3 Ajax.ActionLink 了解一些东西

Question

所以我是新手，我有一个 Ajax.ActionLink 可以正常工作但无法理解(为什么我必须将 div“linkEdit”放在我的 ListView 和部分 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);
        }

Ajax.ActionLink

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

我在部分 View “SolutionProduct”和我的 ListView 中有这个 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>

所以我的问题是，为什么如果我在 ListView 中取出 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 = "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) 确保 _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")"

type="text/javascript">

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

希望所有这些示例对您有所帮助!