How to add or remove partial view Asp.net mvc with jquery?

Question

I have a grid (Kendo grid), when occur edit function for any record of grid,I call a partial view with use of Jquery.Now i want after submit partial view, remove it from main view. My function for render partial view is :

  function ShowEditRecord(e) {
    var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
    $.ajax(
        {
            url: '/Home/TestEdit/'+dataItem.Id.toString(),
            contentType: 'application/html; charset=utf-8',
            type: 'Get',
            dataType: 'html'
        })
    .success(function(result)
    { $('#EditTestSection').html(result); })

My code of controller is :

   public ActionResult TestEdit(Int64 Id)
    {
        var modelItem=getT().Where(a => a.Id == Id).FirstOrDefault();
        return View (modelItem);
    }
    [HttpPost]
    public ActionResult TestEdit(Models.Test Test)
    {
        base.Update(Test);
        return View();
    }

enter image description here

After occur edit function : enter image description here

Instead of returning a view on successful POST, return json with a success code `return JSON(new { success = true })`. Then in your AJAX success handler check this value to determine whether to clear your div. You can see a similar example [here](http://stackoverflow.com/questions/8517071/send-json-data-via-post-ajax-and-receive-json-response-from-controller-mvc). — Jasen, Aug 19 '14 at 00:07

score 5 · Accepted Answer · answered Aug 18 '14 at 23:15

5

You can clear the markup from the partial view using empty():

$('#EditTestSection').empty();

Which you would include as part of your submit function.

answered Aug 18 '14 at 23:15

David Tansey

5,813
4
35
51

How to know my partial view succeed ? When i should use of this code? – M.Mohammadi Aug 18 '14 at 23:20
I was assuming that the rendered partial shown in your screen shot was already functioning correctly. Is it true that your 'Submit Query' button is not yet functioning? – David Tansey Aug 18 '14 at 23:25

score 3 · Answer 2 · answered Aug 18 '14 at 23:17

3

jQuery's empty() function removes all child nodes and text of an element, so you can maybe use something like

$('#EditTestSection').empty();

answered Aug 18 '14 at 23:17

goodface87

236
1
7

How to add or remove partial view Asp.net mvc with jquery?

2 Answers2