Darf Zon
Darf Zon

Reputation: 6378

How to update the view in a jquery dialog using AJAX?

This is what contains my razor view by default, note that I'm using a AJAX link and below also is the controller method.

            <td class="questionText">@Ajax.ActionLink("some text", "PreviewQuestion", new { questionId = question.Id },
                new AjaxOptions() { InsertionMode = InsertionMode.Replace, UpdateTargetId = "target" })</td>

   public ActionResult PreviewQuestion(int questionId)
    {
        db = new ContosoDb();
        var question = db.Questions.Find(questionId);

        return PartialView("_MultipleChoiceQuestion", question);
    }

As you can see, I'm trying to update the current view of a Jqueryd dialog, that's my purpose. I plan to use the following plugin:

http://jqueryui.com/dialog/#default

Until now, if I set a breakpoint in return PartialView(...) is okay. But I don't know where do I have to code to show to popup, and update the dialog content by the action controller.

Upvotes: 0

Views: 517

Answers (2)

Chintana Meegamarachchi
Chintana Meegamarachchi

Reputation: 1820

Use the OnSuccess event of AjaxOptions to hookup a javascript code. OnSuccess will pass you the results of your call, in this case the content of the partial view. Now you can use the jqDialog to show the content Your javascript function would roughly look like the following

function processResults(results){
    $(results).dialog();
}

Upvotes: 1

Biser C.
Biser C.

Reputation: 553

Your partial view I presume is returning some sort of HTML snippet that you intend to tranform into a dialog by using that plug-in. You need to have one more parameter in ajax call e.g.

new AjaxOptions() { InsertionMode = InsertionMode.Replace, UpdateTargetId = "target",OnComplete = "your_js_function();" }

The function will be something like

function your_js_function()
 $( "#target" ).dialog();
}

The purpose of the function is to trigger the appearance of the dialog box.

I hope that helps

Upvotes: 1

Related Questions