Question

如何在ajax unobtrusive表单提交的mvc3中将Id从javascript传递到Controller操作

我的剧本

   <script type="text/javascript">
    $(document).ready(function () {
        $("#tblclick td[id]").each(function (i, elem) {

            $(elem).click(function (e) {
                var ID = this.id;
                alert(ID);
               // var url = '@Url.Action("Listpage2", "Home")'; 
                var data = { Id: ID };
//                  $.post(url,data, function (result) {
//                 }); 
                e.preventDefault();
                $('form#myAjaxForm').submit();
            });
                       });
    });
</script>

如何使用$（'form＃myAjaxForm'）传递Id。submit（）;到控制器而不是

$.post(url,data, function (result) {
    //                 });

我的观点

 @using (Ajax.BeginForm("Listpage2", "", new AjaxOptions
            {
                UpdateTargetId = "showpage"
            }, new { @id = "myAjaxForm" }))
            {

                <table id="tblclick">
                    @for (int i = 0; i < Model.names.Count; i++)
                    {
                        <tr>
                            <td id='@Model.names[i].Id'>
                                @Html.LabelFor(model => model.names[i].Name, Model.names[i].Name, new { @id = Model.names[i].Id })
                              <br />
                            </td>
                        </tr>
                    }
                </table>

            }
        </td>
        <td id="showpage">
        </td>

Answer 1

我不确定$ .post但是我知道window.location对我很有用。请改用它，希望你有很好的结果：）

window.location = "@(Url.Action("Listpage2", "Home"))" + "Id=" + ID;

替换$（'form＃myAjaxForm'）。submit（）;使用此代码，jscript看起来没有任何明显错误。

Answer 2

我会避免使用Ajax Beginform辅助方法并执行一些纯手写和清洁这样的JavaScript

<table id="tblclick">
  @foreach(var name in Model.names)
  {
    <tr>
     <td id="@name.Id">
           @Html.ActionLink(name.Name,"listpage","yourControllerName", 
                         new { @id = name.Id },new { @class="ajaxShow"})         
     </td>
    </tr>
   }
</table>

<script>
 $(function(){
    $(".ajaxShow")click(function(e){
       e.preventDefault();
       $("#showpage").load($(this).attr("href")); 
    });
 });
</script>

这会在你的每个循环中生成锚标记的标记，如下所示。

<a href="/yourControllerName/listpage/12" class="ajaxShow" >John</a>
<a href="/yourControllerName/listpage/35" class="ajaxShow" >Mark</a>

当用户点击该链接时，它会使用jQuery load函数将来自listpage操作方法的响应加载到ID为showPage的div。

假设您的listpage操作方法接受id参数并返回

Answer 3

只需使用带有html属性ID的文本框助手。

@Html.TextBox("ID")

您也可以这样做：

 var form = $('form#myAjaxForm');
 $.ajax({
       type: "post",
       async: false,
       url: form.attr("action"),
       data: form.serialize(),
       success: function (data) {
          // do something if successful
          }
 });

在mvc3中将Id从javascript传递到Controller

3 个答案: