2

I am very new to JQuery and MVC. In my application i am opening a JQuery modal dialog on button click. I am rendering a partial view on this dialog using controller action method which is something like:

public ActionResult Create()
{                     
  return PartialView("Create");
} 

Partial view contains some textboxes and "create" button. On create button i am trying to save data in database. But before that i do some validation like if entered name already exist then show that message to user. I did this using following code:

return PartialView("Create", model);

this is showing the message properly but it render only partial view in browser and modal dialog gets disappeared.

Please let me know how can i show the same modal dialog with error.

1 Answer 1

11

You will need to use AJAX submit of the form. Here's how to proceed. As always start with a view model which will represent the information for the dialog form:

public class MyViewModel
{
    public string Foo { get; set; }

    [Required(ErrorMessage = "The bar is absolutely required")]
    public string Bar { get; set; }
}

then a controller:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult Create()
    {
        return PartialView("Create");
    }

    [HttpPost]
    public ActionResult Create(MyViewModel model)
    {
        if (!ModelState.IsValid)
        {
            return PartialView(model);
        }
        // TODO: the model is valid => do some processing with it
        // and return a JSON result confirming the success
        return Json(new { success = true });
    }
}

and a main view (~/Views/Home/Index.cshtml):

<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.js")" type="text/javascript"></script>
<script type="text/javascript">
    // Remark: all this javascript could be placed in a separate js file
    // to avoid cluttering the views
    $(function () {
        $('#modalLink').click(function () {
            $('#dialog').load(this.href, function () {
                $(this).dialog();
                bindForm(this);
            });
            return false;
        });
    });

    function bindForm(dialog) {
        $('form', dialog).submit(function () {
            $.ajax({
                url: this.action,
                type: this.method,
                data: $(this).serialize(),
                success: function (result) {
                    if (result.success) {
                        alert('thanks for submitting');
                        $('#dialog').dialog('close');
                    } else {
                        $('#dialog').html(result);
                        bindForm();
                    }
                }
            });
            return false;
        });
    }
</script>


@Html.ActionLink("open modal", "create", null, null, new { id = "modalLink" })
<div id="dialog"></div>

and a partial view (~/Views/Home/Create.cshtml) which will contain the form shown in the modal:

@model MyViewModel
@using (Html.BeginForm())
{
    <div>
        @Html.LabelFor(x => x.Foo)
        @Html.EditorFor(x => x.Foo)
        @Html.ValidationMessageFor(x => x.Foo)
    </div>
    <div>
        @Html.LabelFor(x => x.Bar)
        @Html.EditorFor(x => x.Bar)
        @Html.ValidationMessageFor(x => x.Bar)
    </div>
    <input type="submit" value="OK" />
}
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.