Take the 2-minute tour ×

I am creating an MVC website which makes use of Partial Views on Popups to handle all my CRUD transactions. Please note that my application can already handle these CRUD operations perfectly (LINQ-To-Entity). However, I have a problem with my popup forms.

Below is the code from my _Add.cshtml:

@model MyStore.Models.MyModels.ProductsModel

    Layout = null;

@using (Ajax.BeginForm("_Add", "Products", new AjaxOptions
    InsertionMode = InsertionMode.Replace,
    HttpMethod = "POST",
    OnSuccess = "addSuccess"
}, new { @id = "addForm" }))
    <div id="add-message" class="error invisible"></div>


        @Html.HiddenFor(m => Model.ProductCode)

        <div class="editor-label">
            @Html.LabelFor(model => model.ProductName)
        <div class="editor-field">
            @Html.EditorFor(model => model.ProductName)
            @Html.ValidationMessageFor(model => model.ProductName)

        <div class="editor-label">
            @Html.LabelFor(model => model.Price)
        <div class="editor-field">
            @Html.TextBoxFor(model => model.Price)
            @Html.ValidationMessageFor(model => model.Price)

Below is the code from my Controller:

public ActionResult _Add(string productCode)
    ProductsModel model = newProductsModel();
    model.ProductCode = ProductCode ;
    return PartialView(model);

public JsonResult _Add(ProductsModel model)
    if (ModelState.IsValid)
        ProductsManager prod = new ProductsManager();
        Products pa = new Products();

        pa.ProductCode = model.ProductCode;
        pa.ProductName = model.ProductName;
        pa.Price = model.Price;


        return Json(HelperClass.SuccessResponse(pa), JsonRequestBehavior.AllowGet);
        return Json(HelperClass.ErrorResponse("Please review your form"), JsonRequestBehavior.DenyGet);

Please note that the _Add.cshtml is a partial view which is being rendered through a Popup.js which I found on the internet. It is rendered through this code:

@Html.ActionLink("[Add Product]", "_Add", new { ProductCode = @ViewData["ProductCode"] }, new { @class = "editLink" })

This works okay. I mean it adds product to my database. But my problem is upon clicking the Proceed button, I get this pop-up download dialog from the page:

Screenshot A

Can somebody please help me with this? I have a hunch it's because of the HttpMethod i'm using (POST, PUT, GET, DELETE) but i'm not really sure which one is right to use or if it really is the problem in the first place.

Any help would be greatly appreciated! PS. Sorry for the long post.


This is the tutorial I followed for this project: http://ricardocovo.com/2012/04/06/asp-mvc3-editing-records-with-jqueryui-dialogs-and-ajaxforms-razor-version/


Below is the jscript code I am using. It's basically the same one from the tutorial I followed. I just had to comment out a few lines on the last method.

Also, I am using MVC 4. Hope this helps! Thanks!

var linkObj;
$(function () {

        autoOpen: false,
        width: 400,
        resizable: false,
        modal: true,
        buttons: {
            "Update": function () {
                $("#add-message").html(''); //make sure there is nothing on the message before we continue                         
            "Cancel": function () {

    $(".addLink").click(function () {
        //change the title of the dialog
        linkObj = $(this);
        var dialogDiv = $('#addDialog');
        var viewUrl = linkObj.attr('href');
        $.get(viewUrl, function (data) {
            var $form = $("#addForm");
            // Unbind existing validation
            $form.data("validator", null);
            // Check document for changes
            // Re add validation with changes
            //open dialog
        return false;


function addSuccess(data) {
    if (data.Success == true) {
        //we update the table's info
        //var parent = linkObj.closest("tr");
        //now we can close the dialog
        //twitter type notification
        $('#commonMessage').html("Add Complete");
    else {

I commented out these two lines:


because not commenting them would give me the error below during runtime: enter image description here

This leads me to the opinion that this issue is due to the unobtrusive validation. Like the link posted by Xnake below, I am having the same kind of problem. The only different thing is that the Thread Opener had to disable unobtrusive validation on his Web.config file to fix the problem whereas I cannot do the same since my code is using unobtrusive validation.

Any help is greatly appreciated here. Thank you very much!

share|improve this question
Just curious, could you please paste your js code as well? Also, since you didn't mention which MVC version you're using, this might help? stackoverflow.com/a/4892341/605907 –  Xnake Jul 13 '12 at 10:19
I tried the solution given at the thread you gave me (<add value="false" key="UnobtrusiveJavaScriptEnabled" />) but it doesn't seem to work for me. I get error messages on my javascript codes during runtime. Thank you for the response! :) –  Smiley Face Jul 16 '12 at 0:33
add comment

4 Answers

up vote 1 down vote accepted

I encountered a similar problem when trying to find a convention for doing easily reusable popups, some CRUD some not. Rather than including the validation script on every page I added a section to my layout called scripts and let each page add the scripts they need (in this case, the input validation scripts if my page has form elements on it). Note that I left the Unobtrusive Ajax script on the default layout as it has nothing to do with validation and is used in enough of my pages to warrant leaving it in the default layout.

    @RenderSection("Scripts", required: false)

In the case of Partials I created a new layout that I use only for partials that has the same section defined but no other surrounding HTML.

@RenderSection("Scripts", required: false)

This is a pretty primitive example (especially since it has no visible form elements) but you get the idea.

@model Product
    Layout = "~/Views/Shared/_ModalLayout.cshtml";
@section Scripts
    <header><h3>Remove Product?</h3></header>
    Are you sure you wish to remove @Model.Name?
    @using (Html.BeginForm())
        @Html.HiddenFor(x => x.ProductId)
        <input type="submit" value="Remove" />
share|improve this answer
very helpful and elegant indeed! thanks for this! bounty goes to you sir! :) –  Smiley Face Jul 20 '12 at 0:55
add comment

I already fixed my problem! Apparently, I had to include the following js files on my MasterPage. Hope this helps!

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
share|improve this answer
add comment

It's because you return JSON data in _Add (post) thus the browser tries to download it instead of rendering it. Try returning the same PartialView as ActionResult instead in _Add (post). Hope it helps.

share|improve this answer
Hi! Thank you for the response. I already tried changing the return type to an ActionResult and returning the PartialView. However, when I did this the system would just redirect me to a page similar to the Add Form I used. it's just like it renders the partial view into a new webpage. If it may help, this is where I patterned my code: ricardocovo.com/2012/04/06/… –  Smiley Face Jul 13 '12 at 8:20
add comment

This probably happens because the javascript events are not properly binded or the results is not being handled in JS.

share|improve this answer
Hi Sir Covo! I already added the jScript code I am using. It's basically the same one in your tutorial. I just had to change a few naming conventions. Thank you very much! –  Smiley Face Jul 16 '12 at 0:23
add comment

Your Answer


