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();
    }

我需要从局部视图传递数据并将其保存到数据库中，包括媒体。想知道为视频插入的注释。

非常感谢

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将旧版本替换为新注释列表。

部分视图添加数据

2 个答案: