将View的用户输入传递给Javascript函数

问题描述：

我有一个要求用户输入的view。 View是如下 -将View的用户输入传递给Javascript函数

@(Html.Input(m => m.SchoolName).Id("SchoolName")) 
@(Html.Input(m => m.Address).Id("Address")) 
@(Html.Input(m => m.Phone).Id("Phone")) 

<button class="btn btn-primary" name="btnSchoolSave" id="btnSave"> 
      Submit 
</button>

然后我有一个JavaScript函数，它处理所述click事件按钮 -

function() { 
      $("button[name='btnSchoolSave']").on('click', function() {     
       $.ajax({ 
          url: '/School/SaveSchool',   //School is my controller and 'SaveSchool' is the method in the controller. 
          contentType: 'application/html; charset=utf-8', 
          type: 'POST', 
          dataType: 'html' 
         }) 
         .success(function (result) { 
          alert("saved") 
         }) 
         .error(function (xhr, status) { 
          alert(status); 
         }) 
      }) 
     };

我的控制器的方法是象下面这样。我还没有实施该方法。

public void SaveSchool(Models.School model) 
{ 
    //TODO 
}

我的想法是 - 我想通过查看用户输入的所有值，获得所有这些模型值，并将其传递给JavaScript函数，作为回报，javascript函数传递模型控制器方法并保存它。

现在，我知道我可以直接从视图中调用我的Controller操作方法并获取所需的数据保存。但是，我的要求是将数据传递给JavaScript，并从JavaScript调用方法并保存用户输入。

我该怎么做？

感谢

阅读每个输入值，并建立一个JS对象符合C＃类结构，并通过AJAX发送。您也可以尝试序列化您的表单并发送。你有没有尝试过这些？ – Shyju

我没有。你能给一个示例代码吗？ – Kristy

这可能会帮助你开始http://*.com/questions/20226169/how-to-pass-json-post-data-to-web-api-method-as-object/20226220#20226220 – Shyju

答

@model XXX.YourViewModel 

<form id="your-form" style="margin: 0px;"> 
    @Html.AntiForgeryToken() 

    @Html.HiddenFor(m => m.Id) 

    @Html.LabelFor(m => m.SchoolName) 
    @Html.TextBoxFor(m => m.SchoolName) 
    @Html.ValidationMessageFor(m => m.SchoolName) 

    @Html.LabelFor(m => m.Address) 
    @Html.TextBoxFor(m => m.Address) 
    @Html.ValidationMessageFor(m => m.Address) 

    @Html.LabelFor(m => m.Phone) 
    @Html.TextBoxFor(m => m.Phone) 
    @Html.ValidationMessageFor(m => m.Phone) 

    <button id="btnSchoolSave" name="edit" type="button">Save</button> 
</form> 

$("#btnSchoolSave").on('click', function() {     
    //get the form 
    var form = $("#your-form"); 

    //validate form 
    if (!form.valid()) { 
     return; 
    } 

    //serialize the form 
    serializedForm = form.serialize(); 

    //ajax post 
    $.ajax({ 
     url: "@Url.Action("CompanyEdit", "CV")", 
     type: "POST", 
     data: serializedForm 
     ......... 
     ......

现在serializedForm将被张贴到您的控制器参数作为视图模型

[HttpPost] 
[ValidateAntiForgeryToken] 
public ActionResult SaveSchool(YourViewModel modal) 
{ 
    //find school 
    var school = repository.FindSchool(modal.Id) 

    //map value from modal 
    school.SchoolName = modal.SchoolName; 
    .......... 

    repository.SaveScool(school); 
}

Hello @Mindless - 我试过了，但是我的属性变为null。 – Kristy

将View的用户输入传递给Javascript函数

相关推荐