jquery with asp.net mvc dialog box

Question

i have a html link that i want to popup a dialog box with a list of user names and checkboxes. the user can then select one or more checkboxes and click OK and that information will be passed back to the main GUI. is this possible using jquery or should i be using another technology?

Answer 1

No jQuery is the perfect tool for this.

All you need to do is post back to your ActionResult in your controller, return your data [or even better partial view] and display it on the page.

If you want example code then let me know and I'll post some.

But essentially you need to do a $.post("/controller/action", {arg1:val1, arg2:val2}, function(retHtml){ code to show data });

In your controller something like this;

public ActionResult action(string arg1, string arg2)
{
  //Do guff
  return PartialView("MyPartialView", FormViewModel);
}

If you need the sample explained then let me know in a comment.

EDIT:

The code I gave is actually reasonably complete but let's flesh it out somewhat and make it simple. There are better ways of doing this but this is easy and readable if you are new to jQuery.

Let's start with the View;

You have say a button thus:

<input id="submitBtn" name="submitBtn" type="submit" onclick="postComment(<%=Model.Id %>); return false;" value="Submit" />

Then you have the jQuery code to post back like so;

function postComment(id) {
        var commentText = jQuery.trim($("#textbox_ + id.toString()).val());
        $.post("/Articles/jQueryAddComment", { commentText: commentText, id: id, }, function(newCommentListHTML) {
            AddCommentReturn(id, commentType, newCommentListHTML);
        });
    }

What the code above is doing is simply grabbing the comment text from say a field and posting back to my controller action of jQueryAddComment and passing in a few variables.

In my controller I now have;

public ActionResult jQueryAddComment(string commentText, int id)
{
  //code here to add the new comment to the database.

  //more code to get the new list of comments from the database and into a model

  //code to return a partial view back to the view itself
  return PartialView("CommentList", fvm);

}

The callback in the above jQuery code calls a normal Javascript function to take the returned HTML and display it on the page.

In you case you would show a Div with the HTML in it and provide click events to it so the user can interact with it.

Is this any clearer?