Question

所以Iam是新的，我有一个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 featured {    }

MethodWithoutParameters
MethodWithParameters   'parameter00001'

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

这是一个演示form1。
      @ Html.LabelFor（model =＆gt; model.FirstName）       @ Html.TextBoxFor（model =＆gt; model.FirstName，null，new {@class =“labelItem”}）               }


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

这是一个演示form2。
                 @ Html.LabelFor（model =＆gt; model.FirstName）           @ Html.TextBoxFor（model =＆gt; model.FirstName，null，new {@class =“labelItem”}）                   }

            cat.png       删除文件
      函数DeleteFile（）{           var fn = $（'＃fileNameLabel'）。html（）;           $就（{               url：“Home / DeleteFile”，//在调试器中检查this.href               dataType：“text json”，               类型：“POST”，               data：{fileName：fn}，//在这里传递参数               success：function（data，textStatus）{                   if（data）{                       if（textStatus =='success'）{                           $（ '＃fileNameLabel'）HTML（数据）。                           $（ '＃btnDeleteFile'）隐藏（）。                       }                       其他{                           警报（ '错误'）;                       }                   } else {                       警报（ '错误'）;                   }               }           }）;       }       function OnSuccess（response）{           $（ '＃Form1的'）HTML（响应）;       }
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的” ＆GT;

6）一切都应该正常。

我希望所有这些样品都能帮到你！

Answer 2

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

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

在这种情况下，您使用的是InsertionMode

 InsertionMode = InsertionMode.Replace

所以你需要在列表视图和部分视图中使用id为“linkEdit”的div。

MVC 3 Ajax.ActionLink了解一些事情

2 个答案:

这是一个演示form1。

这是一个演示form2。