通过动态表单循环并使用Ajax提交每个onclick?

时间:2014-02-15 14:33:39

标签: c# jquery asp.net-mvc

我在我的视图(MVC)中动态填充表单,我可以在同一页面上有一个或多个表单。每个表单都是唯一命名的,但每种形式的字段变量保持不变。

它可以处理每个表单都有自己的提交按钮并将输入传递给我的Post Controller方法,但现在我需要添加选项以通过单击“下一页”链接提交所有或一个表单。由于我已经加载了JQuery,我试图用Ajax和Json做这个,但我被卡住了。

查看

@using Microsoft.AspNet.Identity
@model IEnumerable<Template.Models.GetViewModel>
@{
   ViewBag.Title = "About me";
   ViewBag.Page = Model.First().PageNumber;
 }
@Html.AntiForgeryToken();
@foreach (var q in Model.OrderBy(o => o.QuestionRanking))
{
    var qtype = q.QuestionTypeId;
    Html.BeginForm("ViewQuestion", "Question", FormMethod.Post, new { @class = @q.ShowHide + " form-horizontal", id = @q.FormNumber, role = "form" });
    <div>
    <h1>@q.QuestionRanking. @q.Question1</h1>
    </div>
    <div class="form-group">
    @Html.TextArea("Answer", q.Answer, new { @class = "form-control", rows = "4", cols = "10" })
</div>
    <div class="form-group">
        <input type="submit" name="@q.FormNumber" class="btn btn-primary" value="Save answer" />
</div>
<hr />
Html.EndForm();
}
<p>
   @Html.ActionLink("Previous", "ViewQuestion", new { page = ViewBag.Page - 1 }) |
   @Html.ActionLink("Next", "ViewQuestion", new { page = ViewBag.Page + 1 })
</p>
@section Scripts {
@Scripts.Render("~/bundles/jquery")
}

控制器

    [HttpPost]
    public ActionResult ViewQuestion([Bind(Include = "QuestionId, UserId")] ResponseViewModel responseViewModel)
    {

        var page = System.Web.HttpContext.Current.Request["page"];
        var newAnswer = System.Web.HttpContext.Current.Request["Answer"];
        var re = new Response
                {
                    Answer = newAnswer,
                    UserId = responseViewModel.UserId,
                    QuestionId = responseViewModel.QuestionId,
                };
                _db.Responses.Add(re);
                _db.SaveChanges();
    }

我的脚本并没有走得太远,我迷失了如何将值传递给我的控制器;

<script>
  function postValues() {
    var str = $( "form" ).serialize();
    $( "#results" ).text( str );
    }
</script>

非常感谢任何建议或例子。

1 个答案:

答案 0 :(得分:1)

要使用ajax,您可以使用以下

转换表单
@using(Ajax.BeginForm("ViewQuestion","Question",null,new AjaxOptions{ options here },
new     { @class = @q.ShowHide + " form-horizontal", id = @q.FormNumber, role = "form"
 }))
   {
       @Html.AntiForgeryToken();
<div>
    <h1>@q.QuestionRanking. @q.Question1</h1>
</div>
<div class="form-group">
@Html.TextArea("Answer", q.Answer, new { @class = "form-control", rows = "4", 
cols =     "10" })
</div>
<div class="form-group">
<input type="submit" name="@q.FormNumber" class="btn btn-primary" 
value="Save   answer" />
</div>
<hr />


   }

然后您可以使用jquery提交每个表单

$('form').each(function(){
$(this).submit();
});

关于@ Html.AntiForgeryToken();这应该在每个表单中,如果你想使用它,你需要将[ValidateAntiForgeryToken]添加到你的控制器动作