2017-04-07 152 views
5

我有一個主視圖和兩個局部視圖。我需要能夠使用我的第一個局部視圖中的值填充視圖模型,並在單擊按鈕時將視圖模型傳遞到第二個局部視圖。該按鈕位於第二個局部視圖中。我已經寫了一個JavaScript函數來做到這一點,但當我檢查控制器方法時,viewmodel是空的。正如你可以在下面的服務框中的截圖中看到的是第二部分視圖在部分視圖之間傳遞視圖模型MVC5

第一部分視圖

enter image description here

第二部分視圖

@model CC.GRP.MCRequest.ViewModels.NewRequestViewModel 

<div id="NewRequest"> 
    <h1>Services</h1> 

    @using (Html.BeginForm()) 
    { 

     @Html.LabelFor(model => model.ProjectName, htmlAttributes: new { @class = "control-label col-md-5" }) 
     @Html.EditorFor(model => model.ProjectName, new { htmlAttributes = new { @class = "form-control", style = "width:100%" } }) 

     <input type="submit" value="Save" class="btn btn-default" onclick="mapInit()" /> 
    } 


</div> 


<script type="text/javascript"> 

    function mapInit() { 
     $.ajax({ 
      url: '@Url.Action("Service", "request")', 
      // datatype: "json", 
      data: $('form').serialize(), // update this 
      type: "POST", 
      // contentType: 'application/json; charset=utf-8' 
     }); 
    } 


</script> 

控制器

[HttpPost] 
public PartialViewResult Service(NewRequestViewModel model) 
{ 
    return PartialView("_NewService", model); 
} 
+2

發出AJAX請求是一個*完全獨立的請求 - 響應循環,與初始視圖呈現期間發生的事件完全脫離了。如果您需要信息,您必須將其與AJAX請求一起發佈或在那裏重建。 –

+0

對不起克里斯。我不明白你。例如,你給我一個例子 – Tom

+0

我可以看到控制器中的視圖模型值,但是在客戶端,當我做一個警報來檢查它顯示的模型數據爲空時 – Tom

回答

0

這是我給你的建議如何解決你的任務:

  1. 你必須改變你的按鈕的類型,第二部分視圖形式按鈕類型上:<input type="button" value="Save" class="btn btn-default" onclick="mapInit()" />這一步是必要不要當您的ajax方法出現原始提交事件後,清理表單。
  2. 在你mapInit功能,您應該添加一個屬性success,寫一個函數有更新你的第二個部分的形式由專人這樣:

    function mapInit() { 
        $.ajax({ 
         url: '@Url.Action("Service", "request")', 
         // datatype: "json", 
         data: $('form').serialize(), // update this 
         type: "POST", 
         success: function (data) 
         { 
          var html = $(data).find('form').html(); 
          $('#NewRequest').find('form').html(html); 
         } 
        }); 
    } 
    

因此,提供你的第一部分的形式有相同的領域,你將能夠填補你想要的第二種形式。

0

1)爲您的局部視圖創建一個get或post操作。這會將您的發佈模型作爲參數並返回第二個局部視圖。

2)修改局部視圖的BeginForm字段在UI和添加的onSuccess事件。(例如Handel OnSuccess

3)創建的Jquery方法來獲得成功請求和替換第二個在UI第一局部視圖內容(例如:$('#PartialView1Container')。html(result);)