CODEWITHSUNDEEP
jqueryajaxasp.net-mvc
theStig
theStig

Reputation: 610

passing data from jquery dialog to asp.net mvc controller

How exactly should data from the jquery dialog be passed to the Controller? I'm unsure what to put for the data (see Index.cshtml code)

Controller

public ActionResult CreateUser() {
        return PartialView("_Create", new RegisterModel());
    }

[HttpPost]
public ActionResult CreateUser(RegisterModel user) {
    //...
}

Index.cshtml

<script type="text/javascript">
$(document).ready(function () {
    $('#dialog').dialog({
        //...dialog information
        open: function(event, ui) {
            $(this).load('@Url.Action("CreateUser")');
        },
        buttons: {
            "Submit": function () {
                $.ajax({
                    url: 'Users/CreateUser',
                    type: 'POST',
                    data: /* What is passed here? */,
                });
            }
        }
    });

    $('#btnCreate').click(function (e) {
        e.preventDefault();
        $('#dialog').dialog('open');
    });

});
</script>

@Html.ActionLink("Create New User", "CreateUser", null, new { id= "btnCreate" })
<div id="dialog" title="Create User" style="overflow: hidden;"></div>

---Edit--- here's the model that's being called from the open function

Model

public class RegisterModel {
    [Required]
    [Display(Name = "User name")]
    public string UserName { get; set; }

    [Required]
    [DataType(DataType.EmailAddress)]
    [Display(Name = "Email address")]
    public string Email { get; set; }

    [Required]
    [StringLength(100, ErrorMessage = "The {0} must be at least {2} characters long.", MinimumLength = 6)]
    [DataType(DataType.Password)]
    [Display(Name = "Password")]
    public string Password { get; set; }

    [DataType(DataType.Password)]
    [Display(Name = "Confirm password")]
    [Compare("Password", ErrorMessage = "The password and confirmation password do not match.")]
    public string ConfirmPassword { get; set; }

    [Required]
    [Display(Name = "Roles")]
    public string RolesId { get; set; }
    public IEnumerable<SelectListItem> RolesItem {
        get { return new SelectList(Roles.GetAllRoles()); }
    }
}

partial view

@model MvcApp.Models.RegisterModel

@{
    ViewBag.Title = "Register";
}

<h2>Create a New User</h2>
<p>
    Passwords are required to be a minimum of @Membership.MinRequiredPasswordLength characters in length.
</p>

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

<div id="CreateModel"></div>

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true, "Account creation was unsuccessful. Please correct the errors and try again.")
    <div>
        <fieldset>
            <table>
                <tr>
                    <td>@Html.LabelFor(m => m.UserName)</td>
                    <td>@Html.EditorFor(m => m.UserName)</td>
                    <td>@Html.ValidationMessageFor(m => m.UserName)</td>
                </tr>
                ... more fields... 

            </table>
        </fieldset>
    </div>
}

Upvotes: 0

Views: 1877

Answers (1)

ryudice
ryudice

Reputation: 37366

I supposed you want to show the form to create a user in the dialog, if that so, just create your form inside this <div id="dialog" title="Create User" style="overflow: hidden;"></div> element as normal, just make sure you use javascript validation, otherwise the page will be refreshed and the dialog will get lost if the users submits invalidad information.

Upvotes: 1

Related Questions