使用jQuery Post()将模型值传递给控制器

本文关键字：值传 控制器 模型 jQuery Post 使用 | 更新日期: 2023-09-27 18:11:03

应用程序在。net框架3.5和。net框架3.5的MVC框架2.0。我有一个视图，在$。Post传递参数。我还需要那美元。Post，将模型值传递给控制器。

在下面的视图中，我如何在$。post函数，以便控制器获取文本框的值。我需要按钮，而不是提交按钮。

视图为:

<div>
        <label for ="Name"> Name</label> &nbsp; <%=@Html.TextBoxFor(m => m.Name) %>
        <select id ="prod" style ="width:150px">
            <option value ="GL">GL</option>
            <option value = "Property"> Property</option>
            <option value = "Package">Package</option>
            <option value = "Island">Island</option>
        </select> 
        <input type="button" id="btnPost" value = "GetValue" />
</div>


   <script src="/Scripts/jquery-1.4.1.min.js" type ="text/javascript"></script>
    <script type ="text/javascript" >
         $(function() {
         $("#btnPost").click(function() {
        alert("here" + $("#prod").val());
        $.post("/Transfer/DisplayText", { "str1": $("#prod").val()},
           function(data) {
           alert("success");
       });
    });
});

控制器为:

[HttpPost]
    public ActionResult DisplayText(string 
       str1,TestPost_AjaxMVC.ViewModels.TransferViewModel model)
     {
        string str2 = str1;
        return View("Transfer");
     }

模型为:

 public class TransferViewModel
  {
      public string Name { get; set; }
  }

使用jQuery Post()将模型值传递给控制器

我认为你的代码中一切都很好，只是替换

$.post

$.get因为你要从控制器返回一个视图也要使用url。action像下面这样，因为当你发布项目

时它可能不工作
$.get('<%=Url.Action("DisplayText","Transfer")%>', { str1: $("#prod").val()},
           function(data) {
           alert("success");
       });

你应该去掉str1的双引号。

JSON。将模型字符串化并作为数据的一部分发送，让MVC使用JSON模型绑定

$(function() {
   $("#btnPost").click(function() {
    var TransferViewModel={};
    TransferViewModel.Name="SomeData";
    var postData={};
    postData.str1=$("#prod").val();
    postData.model=TransferViewModel;

   $.ajax({
       url:"/Transfer/DisplayText",
       type:"POST",
       data:JSON.stringify(postData),
       contentType:"application/json; charset=utf-8",
       success: function(){
       }
      });
   });
});
相关文章：