創建一個部分視圖與一個表格文章，計劃在幾個地方使用

如何創建一個部分視圖與表格文章，我打算在幾個地方使用？創建一個部分視圖與一個表格文章，計劃在幾個地方使用

部分視圖將具有一種可在數據存儲器中創建條目並在此表單下顯示持久數據的表單。所以在提交表單之後，我會在窗體下看到我的表單，而不用切換父視圖。如果模型無效，錯誤也會顯示。這裏的訣竅是，如何在不創建動作的情況下保留在當前頁面中在顯示局部視圖的每個視圖的控制器中？

我會在10個不同的父視圖中使用這個局部視圖。

下面，我提供了一些可以幫助社區準確理解問題的代碼。

我應該如何配置我的代碼才能實現我的目標。

感謝

這是局部視圖樣品

@model ViewModels.CommentViewModel 

@using (Html.BeginForm("Index", "Comment", FormMethod.Post)) 
{ 
@Html.AntiForgeryToken() 

<div class="form-horizontal"> 
    @Html.ValidationSummary() 


    <div class="form-group"> 
     <label class="control-label col-md-2">Please Type Your Name</label> 
     <div class="col-md-10"> 
      @Html.TextBoxFor(model => model.Name, new { @class = "form-control" }) 
      @Html.ValidationMessageFor(model => model.Name) 
     </div> 
    </div> 
<input id="addComment" type="submit" value="Add" /> 
</div> 
} 
@foreach (var item in Model.Comments) 
{ 
<p> 
    @item.Name 
</p> 

}

這裏是控制器

public PartialViewResult Index(int id) 
    { 
     var model = new CommentViewModel() { Comments= db.Comments.Where(x=> x.NewsId == id && x.isApproved== true)}; 
     return PartialView("_Comments", model); 

    } 
[HttpPost] 
    public PartialViewResult Comment(int id, CommentViewModel model) 
    { 
     if (ModelState.IsValid) 
     { 
      var comment = new Comment() 
      { 
       Name = model.Name, 
       Title = model.Title, 
       CommentContent = model.Content, 
       Email = model.Email, 
       CreationDate = DateTime.Now, 
       RefId = Guid.NewGuid(), 
       isApproved = false, 
       NewsId = id 
      }; 
      db.Comments.Add(comment); 
      db.SaveChanges(); 
      return PartialView(); 
     } 

     return PartialView(); 
    }

來源

2014-11-04 user3055125

這不是服務器端的問題，你有沒有考慮過在需要時使用一些javascript來包含html元素？很多Framework實現了這個，我使用的是angularjs，它避免了卡住建模靜態頁面服務器端 – Charlie 2014-11-04 13:50:19

如果你想要做的事情一樣提交表單並檢索更新的數據，而無需重新加載頁面，那麼你就是在談論AJAX。在這種情況下，這是一種局部的觀點是沒有意義的。這個局部視圖將呈現多少個不同的視圖並不重要，只需要一個控制器中的一個動作來響應AJAX請求。然後，你只需要像做用JavaScript以下，可以通過在任何意見需要這種形式的外部文件包括：

$('#MyPartialViewForm').on('submit', function (e) { 
    // prevents form from submitting standard way, causing page refresh 
    e.preventDefault(); 

    $.post('/url/that/handles/form', $(this).serialize(), function (results) { 
     // results will be a rendered partial with the data here, 
     // which you can use to replace the content of a div or 
     // something on your page. 
     $('#DivWhereSubmittedDataIsDisplayed').html(results); 
    }); 
});

然後，在你的行動來響應AJAX請求：

[HttpPost] 
public ActionResult ActionForAjaxForm(FormModel model) 
{ 
    // do something like save the posted model 

    return PartialView("_PartialViewThatRendersData", model); 
}

來源

2014-11-04 13:56:24

創建一個部分視圖與一個表格文章，計劃在幾個地方使用

回答

相關問題