Question

我有按钮 - 一个子提交和一个取消。前者是表格中常用的输入控件。

@Html.ActionLink(" ", "List", "Home", null, new { @class = "cancel" })
<input type="submit" value="Save" />

以上的工作应该如此。但是，我对代码的外观不满意，所以我尝试使用 ActionLink 执行这两个事件，就像这样。

@Html.ActionLink(" ", "List", "Home", null, new { @class = "cancel" })
@Html.ActionLink(" ", "Save", "Home", null, new { 
  @class = "submit", 
  onclick = "javascript:document.forms[0].submit()" })

当我执行它时，我在控制器上命中，但传回的模型是空的（即所有字段都是默认值）。我猜这个动作链接会将我从表单的上下文之外发送给保存，但我不知道如何让它不这样做。

至少，我希望该页面能够发送两个来电。一个基于虚拟模型，通过 ActionLink 的 href ，第二个是由JS执行的。[/ p>

如何让它发挥作用？有更好的方法吗？主要是，我不想设置输入控件的样式。我更喜欢设置 Html.ActionLink 生成的链接的样式。

Answer 1

Html.ActionLink生成一个锚标记，然后点击它通常会产生一个GET请求。通常，您无法使用该表单提交表单数据。

当用户点击链接时，使用javascript-jQuery，使用jQuery serialize()方法序列化表单并使用ajax发送它。

@using(Html.BeginForm())
{
   <label>Name </label> @Html.TextBoxFor(s=>s.FirstName)

   @Html.ActionLink("Save","Save","Home",null,new { class="sbmt" })

}

这将在您的表单标记内生成一个带有css类sbmt的锚标记，并在您的javascript中，使用此css类监听锚标记上的click事件。

$(function(){

  $("a.sbmt").click(function(e){

    e.preventDefault();  // prevent default form submit behaviour since we are doing ajax
    var _f=$(this).closest("form");

    $.post(_f.attr("action"),_f.serialize(),function(res){
       //do something with the response coming back from your Save action method.
       if(res.status==="success")
       {
           alert("Saved");
          // If you want to reload the page, you can do this
           window.location.href=window.location.href; 

       }
    });

  });

});

由于我们正在发出一个ajax请求，所以最好从action方法返回一个json响应。

[HttpPost]
public ActionResult Save(YourViewModel model)
{
  // Save 
  if (Request.IsAjaxRequest())
  {
     return Json(new {status="success"});           
  }
  return RedirectToAction("Index"); //if not an ajax request, do the redirect
}

如何使用ActionLink

1 个答案: