Pass ajax success result to a partial view

Question

I have included the following lines of code where the result within the success function contains the necessary data in the form of [object Object] (Consider result has the attributes such as Name, Category and Description in the form of [object Object]).

$.ajax({
        url: rootUrl + 'Admin/EditRSS',
        type: "GET",
        data: { FeedId: FeedId },
        dataType: 'json',
        success: function (result) {
            // do something here                
        },
        error: function () { alert("error") }

    });

Now I want to use this result in a jquery dialog box which loads a partial view

$("#editFeedDialog").dialog({

    title: "Edit Feed",
    width: '60%'

}); 
<div id="editFeedDialog" style="display: none; background-color: aliceblue;" >

@Html.Partial("EditFeed",//pass result as model)

</div>

Controller

    [HttpGet]
    public ActionResult EditFeed(int FeedId)
    {

        using (DbContext dataContext = new DbContext())
        {
          var feedDetails = (from u in DataContext.FeedMaster
                        where u.FeedMasterId == FeedId
                        select u).FirstOrDefault();

            FeedMaster r = new FeedMaster();

            r.FeedMasterId = FeedId;
            r.FeedName = feedDetails.FeedName;
            r.FeedCategory = feedDetails.FeedCategory;
            r.FeedDescription = feedDetails.FeedDescription;
            return Json(r, JsonRequestBehavior.AllowGet);

        }


    }

Either I should be able to pass it as a model to my partial view or at least I should be able to use it within the I am new to ajax. So can anyone help me out with this?

do `$("#editFeedDialog").html(result);` on `success` of ajax and return PartialView that will return Html content. — Parth Trivedi, Sep 13 '16 at 13:00
since result is in the form of [object Object], what I want is something like
result.Name

result.Category

result.Description
@ParthTrivedi — pallavi, Sep 13 '16 at 13:01
Then Create html and append as i mentioned `$("#editFeedDialog").html(your html);` — Parth Trivedi, Sep 13 '16 at 13:03
I have edited my question and added the controller code @ParthTrivedi — pallavi, Sep 13 '16 at 13:10
Chris answer is perfect. But we have one more way i.e. you can call another AJAX inside success callback that will take your object as input and get response in HTML, check this if you want to know how to call partial view using jquery http://stackoverflow.com/questions/32193018/how-to-load-partial-view-via-jquery — Sam, Sep 14 '16 at 09:10

score 2 · Answer 1 · answered Sep 13 '16 at 13:14

You can't pass JavaScript data into a Razor method. The two happen at entirely different times in the request pipeline. Namely, Razor runs server-side, before the server returns the response, while JavaScript runs client-side, after the server returns the response.

If you want to load a partial with the data returned from your AJAX call, have your AJAX endpoint return a partial instead of the data. Then, you don't need an extra step, and you can just insert the HTML response of the AJAX call directly into the DOM.

score 0 · Answer 2 · answered Sep 13 '16 at 13:46

There are two ways this can be accomplished:

Return the result as HTML.
Return the result as JSON.

Since you are returning the JSON data, the following piece of code should be suitable.

JAVASCRIPT:

$.ajax({
        url: @url.action('EditFeed','YourController'),
        type: "GET",
        data: { FeedId: FeedId },
        dataType: 'json',
        success: function (result) {
            $('#editFeedDialog').empty().html('<p>'+result.FeedName+'</p><p>'+result.FeedCategory+'</p><p>'+result.FeedDescription+'</p>');           
        },
        error: function () { alert("error") }

    });

HTML:

<div id="editFeedDialog" style="background-color: aliceblue;"></div>

Pass ajax success result to a partial view

2 Answers2