通过jquery在asp.net mvc中传递强类型表单模型数据

Question

很容易将表单提交到具有强类型文本框的控制器中的操作方法，例如，使用提交按钮，但如果我想通过 jquery 发送与强类型文本框完全相同的表单，也许 $单击其他内容后调用 .ajax。

这样的代码：

 @Html.TextBoxFor(m => m.topTenFav.YoutubeLink,new { id="youTubeLinkTxt"})

为我们完成所有工作，在控制器中映射对象的属性非常简单

 [HttpPost]
 public ActionResult AddTopTenFav(HomeViewModel topTen)
 {
     topTen.topTenFav.Date = DateTime.Now;
     topTen.topTenFav.UserName = User.Identity.Name;
     repository.AddTopTen(topTen);
     repository.Save();
     return RedirectToAction("Index");
 } 

如何将此表单发送到控制器，将表单中的文本框映射到单击事件上的对象属性，例如

 $("#btnAddGenre").click(function () {}

 @using (Html.BeginForm(
        "AddTopTenFav", "Home", FormMethod.Post, new { id = "AddTopTenFavForm" }))
 {

    <span id="youTubeLinkSpan">Youtube Link</span>
    <div>
        @Html.TextBoxFor(m => m.topTenFav.YoutubeLink,new { id="youTubeLinkTxt"})
    </div>
    <span id="youTubeNameSpan">Song Title</span>
    <div>
        @Html.TextBoxFor(m => m.topTenFav.Title,new { id="youTubeNameTxt"})
    </div>

    <button type="submit" name="btnSubmit" value="">submit</button>
 }

Answer 1

你可以发以下帖子：

$(document).ready(function(){
    $('#btnAddGenre').click(function () {
        $.post(
            $('#AddTopTenFavForm').attr('action'),
            $('#AddTopTenFavForm').serialize,
            function (data) {
                window.location = @Url.Action("Index");
            },
            'html' // returned data type
        );
    });
});

我使用 html 数据类型，因此您可以返回任何您想要的内容，并且重定向发生在 window.location 上，使用 @Url.Action 提供位置。

如果有效，请标记为已接受的答案

Answer 2

是的，您可以使用 jquery 发布强类型 textboxex 的数据。 首先你必须做 使用下面的代码获取 jquery 中所有 textboxex 的值。

            var xx= $("#xx").val();

这将从您的 mvc 文本框中给出 xx 中的 val。 然后通过使用 jquery ajax call 你可以调用 action 方法。 代码如下。

$.get("/XXXX/YY/1", { xxName: xx }, function (data) {
                    var status = data;
                    alert(status);
                    if (status) {
                        return true;
                    }
                    else {
                        alert("The book with this name is already present. TRY DIFFERENT NAME!")
                        return false;
                    }
                });

这里 xxxx 是控制器，yy 是操作方法名称。下一个参数是您要作为参数发送的所有文本框的值。 这将执行 ajax 调用并返回值。

如果您发现任何问题，请告诉我，我会给出整个代码。