Partial View to Add Data

Question

So here, I need to add comment for video in one view. I have the main view code like this that displaying video and comment for that video.

<!-- 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>
}

and this the partial view

@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")
}

this is my ViewModel

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

and this is my controller

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

I need to pass data from partial view and save it to database include the media.Id to know that comment inserted for the video.

Thanks so muchhh

Answer 1

putting scripts on a partial view is generally bad practice. Script gets inserted into the middle of the view. For saving information from a partial view I use ajax calls. To do that add a class to your post button

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

then in your script on the main page

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

just make sure the inputs on your controller match exactly the names that you have defined here

[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

I would suggest using @Html.Action and get the create form from there. Also, once the comments are stored you can redirect to the parent action. That should automatically update the comments list.

But that would be a bad idea.

Rather you can put get your comments by calling action from ajax ($.ajax) and use pure.js to replace the older ones with the new comment list.