如何使用 AJAX jQuery 从视图表单返回模型

Question

在视图中我有一个表单：

<div>
     @using (Html.BeginForm(null, null, new { id = "TCPForm" }))
     {
        <h4>Request</h4>
        @Html.TextBoxFor(m => m.HttpRequest, new {name="HttpRequest"})
        <h4>Port Nunber</h4>
         @Html.TextBoxFor(m => m.HttpPortNumber, new { name ="HttpPortNumber"})
         @Html.RadioButtonFor(model => model.HttpRequestType, HttpRequestType.Get, new {@Id = "get"})
         <label for="get">Get</label>
        @Html.RadioButtonFor(model => model.HttpRequestType, HttpRequestType.Post, new {@Id = "post"})
         <label for="post">Post</label>
      }
      <p></p>
      <input type="submit" id="TCPSubmit" value="Send Request" />
</div>

提交按钮在表单之外，因为我使用 jQuery 拦截它。

然后我有这个 Jquery 来拦截按钮按下，显示一个微调器并通过 Ajax 获取结果：

        $('#TCPSubmit').click(function () {
        $('#resultPaneTCP').html("<div class='spinner'><div class='dot1'></div><div class='dot2'></div></div>");
        $.ajax({
            url: "@Url.Action("SendTcpMessage", "TestandDevelopment")",
            type: "POST",
            data: $('#TCPForm').serialize(),
            datatype: "text",
            success: function (data) {
                $('#resultPaneTCP').html(data);
            }
        });
        return false;
    });

这是动作签名：

    public ActionResult SendTcpMessage(HttpViewModel httpViewModel)
    {

这是我发送到视图并在表单中进行编辑的模型：

    public class HttpViewModel 
    {
       public string HttpRequest { get; set; }
       public string HttpResponse { get; set; }
       public string HttpRequestType { get; set; }
       public string HttpPortNumber { get; set; }

       public HttpViewModel()
       {
       }

       public HttpViewModel(string httpRequest, string httpResponse)
       {
           this.HttpRequest = httpRequest;
           this.HttpResponse = httpResponse;
       }
}

当我运行上述程序并按下视图中的按钮时，会显示微调器，触发动作但动作签名中的模型是空的。

我做错了什么？

Answer 1

您的视图模型和动作签名没有问题，但您需要稍微重新配置您的视图，尤其是您声明@Html.BeginForm() 和@Html.RadioButtonFor() 的方式。在下面的示例中，我将this overload 用于@Html.BeginForm()，将this overload 用于@Html.RadioButtonFor()。

另外，我使用"Controller" 作为控制器名称（一次在 HTML 中，一次在 jQuery sn-p 中）——确保将其替换为您的实际控制器。

    <div>
        @using (Html.BeginForm("SendTcpMessage", "Controller", FormMethod.Post, new { @id = "TCPForm" }))
        {
            <h4>Request</h4>
            @Html.TextBoxFor(m => m.HttpRequest, new { name = "HttpRequest" })
            <h4>Port Nunber</h4>
            @Html.TextBoxFor(m => m.HttpPortNumber, new { name = "HttpPortNumber" })
            @Html.RadioButtonFor(model => model.HttpRequestType, "Get" )
            <label for="get">Get</label>
            @Html.RadioButtonFor(model => model.HttpRequestType, "Post" )
            <label for="post">Post</label>
            <input type="submit" id="TCPSubmit" value="Send Request" />
        }                      
    </div>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>
        $('#TCPSubmit').click(function (e) {
            //no need to place the submit button outside of the form
            e.preventDefault();
            $.ajax({
                url: "@Url.Action("SendTcpMessage", "Controller")",
                type: "POST",
                data: $('#TCPForm').serialize(),
                datatype: "text",
                success: function (data) {
                    alert(data);
                }
            });
            return false;
        });
    </script>

向SendTcpMessage 操作添加断点表明httpViewModel 现在填充了表单传递的值：