0

I am trying to replicate something similar to that of the 'flag' feature on StackOverflow, where a user clicks on a 'delete' link. They are then shown a popup (using jQuery) prompting them for a reason why they are deleting the item. They are presented with a few predefined options via a series of radio buttons, along with an 'other' textbox. They must select one of these options before then submitting the form, which would then perform some serverside operations, then the initial pop-up would disappear (and I would manipulate some text in a couple of places).

I've got the popup in place and I have rendered a form with the various options within this popup, but I'm not sure how to handle the posting of this form. If I treat it as a normal form, when the user clicks the submit button in the pop-up, it won't be performing any ajax functionality but instead posting to one of my controller action methods and then I need to (server-side) redirect back to my page, so as to see the changes.

How is the collection of data from within a popup normally handled in an AJAX type scenario? Can anyone please provide any examples? I can't see how SO is doing it with the 'flag' functionality.

2 Answers 2

1

You can use the built in AJAX helpers of MVC. Roughly as follows...

Declare some AJAX options:

@{
    AjaxOptions ajaxOpts = new AjaxOptions { UpdateTargetId = "target" };
}

Then declare your form using the AJAX BeginForm method:

@using (Ajax.BeginForm("GetData", ajaxOpts))
{
  @* Here you put your form data. I'm guessing your popup could just be a DIV that gets positioned and made visible *@


}

Your target to update when the AJAX request has come back would just be a simple DIV:

<div id="target">  
    @* The output of your GetData controller method will end up here *@
    @Html.Action("GetData", new { model = Model })
</div>

Then in your controller you have something that returns a PartialView containing your data:

  public PartialViewResult GetData(ViewModel model)
  {
     // Do some stuff here to fetch some data
     // ViewModel will be whatever your view model is called

     return this.PartialView("GetData", model);
  }

That's the basics of getting the AJAX working. If you wanted to take the HTML that gets sent back to the browser and update different bits of your page, you'd have to add a jQuery function that you get the AJAX helper to call by specifying a function to the OnComplete argument to AjaxOptions.

The data from your partial view might then contain some hidden chunks of HTML that you can move elsewhere in the browser.

Unfortunately the MVC AJAX helper only supports one UpdateTargetId.

Edit to add

You need to set this in appSettings in your web config file:

<add key="UnobtrusiveJavaScriptEnabled" value="true"/>

You will also need to include the jQuery extensions in your html output (maybe in your _Layout.cshtml file?):

<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
0

You can override the submit behavior of the form, then send the serialized form results to the server in an AJAX post.

$('#myForm').submit(function() {

    $.ajax({
      url: "MyPage.aspx",
      type: "POST",
      data: $(this).serialize(),
      dataType: "text"
    });

    return false;
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.