部分視圖來添加數據

Question

所以在這裏，我需要在一個視圖中添加對視頻的評論。 我有這樣的主視圖代碼，顯示該視頻的視頻和評論。

<!-- language: C# --> 
@model AzureMediaPortal.ViewModels.ViewModelWatch 

@{ 
ViewBag.Title = "Watch"; 
} 

<div id="videoPlayer"> 
</div> 

<h2>@Html.DisplayFor(model => model.media.Title)</h2> 
<h3> By @Html.DisplayFor(model => model.media.UserId) at @Html.DisplayFor(model => model.media.UploadDate) </h3> 

@Html.HiddenFor(model => model.media.Id) 
@Html.HiddenFor(model => model.media.AssetId) 
@Html.HiddenFor(model => model.media.FileUrl, new { id = "fileUrl" }) 

<div class="display-label" style="font-weight:bold"> 
    @Html.DisplayNameFor(model => model.media.Description) 
</div> 
<div class="display-field"> 
    @Html.DisplayFor(model => model.media.Description) 
</div> 
<br /> 
<div class="display-label" style="font-weight:bold"> 
    @Html.DisplayName("Category") 
</div> 
<div class="display-field"> 
    @Html.DisplayFor(model => model.media.Category.CategoryName) 
</div> 

<h3>Comments</h3> 
@foreach (var item in Model.comment) 
{  
<div class="display-label" style="font-weight:bold"> 
    @item.UserId 
</div> 
<div class="display-field"> 
    @item.Content 
</div> 

} 

@Html.Partial("Post",new AzureMediaPortal.ViewModels.ViewModelWatch()) 

@section Scripts { 
    <script src="~/Scripts/playerframework.min.js"></script> 
    <script src="~/Scripts/media-player.js"></script> 
    @Scripts.Render("~/bundles/jqueryval") 
    <script type="text/javascript"> 
    mediaPlayer.initFunction("videoPlayer", $("#fileUrl").val()); 
</script> 
} 

和這個局部視圖

@model AzureMediaPortal.ViewModels.ViewModelWatch 

@{ 
ViewBag.Title = "Post"; 
} 

<h2>Add Comment</h2> 

@Html.HiddenFor(model => model.cmnt.MediaElement.Id) 

@using (Html.BeginForm("Post","Home",FormMethod.Post)) { 
@Html.AntiForgeryToken() 
@Html.ValidationSummary(true) 
<fieldset> 
    <legend>Add Comment</legend> 

    <div class="editor-label" style="font-weight:bold"> 
     @Context.User.Identity.Name 
    </div> 
    <div class="editor-field"> 
     @Html.TextAreaFor(model => model.cmnt.Content) 
     @Html.ValidationMessageFor(model => model.cmnt.Content) 
    </div> 

    <p> 
     <input type="submit" value="Post" /> 
    </p> 

</fieldset> 
} 

@section Scripts { 
@Scripts.Render("~/bundles/jqueryval") 
} 

這是我的ViewModel

public class ViewModelWatch 
{ 
    public MediaElement media { get; set; } 
    public List<Comment> comment { get; set; } 
    public Comment cmnt { get; set; } 
} 

，這是我的控制器

public ActionResult Watch(int id) 
    { 
     ViewModelWatch vm = new ViewModelWatch(); 
     vm.media = _repository.GetMedia(id); 
     vm.comment = _repository.GetMediaComment(id); 

     return View(vm); 
    } 

    public ActionResult Post() 
    { 
     return View(); 
    } 

    [HttpPost] 
    public ActionResult Post(Comment comment, int id) 
    { 
     if (ModelState.IsValid) 
     { 
      comment.UserId = User.Identity.Name; 
      comment.MediaElement.Id = id; 
      db.Comments.Add(comment); 
      db.SaveChanges(); 
      return RedirectToAction("Watch"); 

     } 
     return View(); 
    } 

我需要通過從局部視圖數據並將其保存到數據庫包括media.Id知道爲視頻插入的評論。

感謝這麼muchhh

Answer 1

把劇本上的局部視圖通常是不好的做法。腳本被插入到視圖的中間。爲了從局部視圖保存信息，我使用了ajax調用。要做到這一點的主要頁面上添加一個類到您的文章按鈕

<input type="button" class="btnSubmit" value="Post" /> 

然後在你的腳本

$(document).on('click', '.btnSubmit', function(){ 
    $.ajax({ 
     url: '@Url.Action("Action", "Controller")', 
     cache: false, 
     async: true, 
     data: { 
      //put the data that you want to save from the partial here 
      id: $('#hiddenID').val(), 
      content: $('#Content').val() 
     }, 
     success: function (_result) { 
      //can add something here like an alert, close a popup something along those lines 
     } 
    }); 
}); 

只要確保你的控制器匹配的輸入正是你在這裏定義

名稱

[HttpPost] 
public ActionResult Action(int id, string content){ 
    //database call to save the fields 
    //see here for an example of returning json http://stackoverflow.com/questions/1482034/extjs-how-to-return-json-success-w-data-using-asp-net-mvc 
    return Json(json); 
} 

Answer 2

我會建議使用@ Html.Action並從那裏獲取創建表單。另外，一旦評論被存儲，您可以重定向到父操作。這應該會自動更新評論列表。

但這是一個壞主意。

相反，您可以通過調用ajax（$ .ajax）的操作來獲取您的評論，並使用pure.js將新的評論列表替換爲較舊的評論列表。