重新加載/取消主頁內的部分視圖

Question

在我的主頁，我有一個隱藏的div，我加載了一個部分視圖包含一個表單。

主視圖

<div id="partial_load" style="display: none;"> 

</div> 

腳本

$('#initCreatePro').click(function() { 
var id = $(this).data('assigned-id'); 
$('#partial_load').show(); 
$('#partial_load').load('/User/CreatePartial?userid=' + id); 
}); 

到目前爲止好，現在我的部分觀點中我有3個按鈕

1. 提交表單= =>好的沒問題
2. 取消==>我想取消和隱藏回格或卸載局部視圖
3. 下一頁==>點擊時，它定位到的動作，這將修改數據，並應與修改後的數據
重新加載局部視圖

內的部分觀點

<button class="btn" type="button">Cancel</button> 
     <a href="@Url.Action("Next", "User", Model)" class="btn btn-success">Next</a> 
     <input id="subButon" class="btn btn-primary" type="submit" value="Submit" style=" right: 15px;" /> 

下一步行動

public ActionResult Next(UserViewModel uvm) 
    { 
     if (ModelState.IsValid) 
     { 
      Uow.Users.Add(uvm.User); 
      Uow.Commit(); 

      uvm.User.RecalculateScore(); 
      return PartialView("_Create", uvm); 


     } 
    } 

我怎麼能強制局部視圖中隱藏div來與下一個被點擊的新的數據來重載，還我怎麼能休息的形式和隱藏的div被點擊

Answer 1

對於「取消當取消「按鈕，在HTML改爲

<button id="cancel" class="btn" type="button">Cancel</button>// add id attribute 

，並在主視圖中添加如下腳本

$('#partial_load').on('click', '#cancel', function() { 
    $('#partial_load').empty(); 
}); 

邊注：有沒有真正的需要包括style="display: none;在您<div id="partial_load">元素，您也可以在腳本上刪除$('#partial_load').show();。

對於你的'下一步'按鈕，它有點不清楚你想要做什麼。您當前的代碼正在重定向到您的控制器Next()方法並傳遞原始未更改的模型，並且如果您的模型包含任何屬於複雜對象（屬性User似乎是）或集合的屬性，則綁定將失敗。如果綁定確實成功並且您得到有效的對象，則您的RecalculateScore()方法建議您更改模型中屬性的值，但由於您的模型已添加到ModelState，所以這些更改將不會反映在視圖中。

假設你想在窗體上節省，並返回不同的視圖的方法提交編輯的值，然後你的代碼應該是

<button id="next" type="button" class="btn btn-success">Next</button> 

$('#partial_load').on('click', '#next', function() { 
    var url = '@Url.Action("Next", "User")'; 
    var form = $(this).closest('form'); 
    $.post(url, form.serialize(), function(data) { 
     $('#partial_load').html(data); 
    }); 
}); 

如果你的方法是POST

[HttpPost] 
public ActionResult Next(UserViewModel uvm) 
{ 
    if (ModelState.IsValid) 
    { 
     .... 
     ModelState.Clear(); 
     return PartialView("_Create", uvm); 
    } 
    else 
    { 
     // return the same partial view so that validation errors are displayed 
    } 
} 

備註：不清楚你的RecalculateScore()方法正在做什麼，但可能更容易使用return Json(someValues);並用新值更新現有部分。