在asp.net mvc中提交Ajax.BeginForm后，jQuery代码无法正常工作

Question

I tried to minimize huge problem to a small one so I created the new sample web project; mvc-empty in VS. I created one view named „Index” in Home controller. Index view code:

@model WebApplication16.ViewModels.Home.IndexVM
@{
    ViewBag.Title = "Index";
}

@Html.Partial("~/Views/Home/_Orders.cshtml", Model.Orders)

@section scripts{
    <script src="~/Scripts/jquery.validate.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
    <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
    <script>
        $("#Type").change(function () {



            $('#order-current > img').remove();
            var currentOrder = "#Type_" + $("#Type").find('option:selected').text();

            var $img = $(currentOrder).clone();
            $img.removeClass("hidden");
            $("#order-current").append($img);

            $("#ajax-form").submit();
        });
    </script>
}

Home controller code:

public class HomeController : Controller
    {
        [HttpGet]
        public ActionResult Index()
        {
            IndexVM dataVM = new IndexVM();
            GetControlsDataSource(dataVM.Orders);

            return View(dataVM);
        }

        private static void GetControlsDataSource(OrdersVM dataVM)
        {
            List<SelectListItem> typeControlDataSource = new List<SelectListItem>();
            foreach (var en in Enum.GetValues(typeof(TypeEnum)))
            {
                SelectListItem item = new SelectListItem();
                item.Text = en.ToString();
                item.Value = ((int)en).ToString();
                typeControlDataSource.Add(item);
            }
            dataVM.TypeControlDataSource = typeControlDataSource;
        }


        [HttpPost]
        public ActionResult Pay(IndexVM dataVM)
        {
            GetControlsDataSource(dataVM.Orders);
            if (ModelState.IsValid)
            {
                dataVM.Orders.Info = "Info bla bla bla";
                return PartialView("~/Views/Home/_Orders.cshtml", dataVM.Orders);
            }
            else
            {
                return View(dataVM);
            }

        }
    } 

There is also a partial view named “_Orders”, which is rendered on the Index view.The code of _Orders partial view:

@model WebApplication16.ViewModels.Home.OrdersVM

@using (Ajax.BeginForm("Pay", "Home", new AjaxOptions
{
    InsertionMode = InsertionMode.Replace,
    UpdateTargetId = "result",
}, new { id = "ajax-form" }))
{
    <div id="result">
        <div id="order-current">

        </div>


        <div>
            @Html.TextBoxFor(x => x.Name, new { @class = "form-control", style = "margin-top:10px;", id = "Name" })
            @Html.ValidationMessageFor(x => x.Name)
        </div>

        <div>
            @Html.DropDownListFor(x => x.Type, Model.TypeControlDataSource, new { @class = "form-control", style = "margin-top:10px;", id = "Type", })
            @Html.ValidationMessageFor(x => x.Type)
        </div>
        <div>
            <p>@Model.Info</p>
        </div>
        <button type="submit" class="btn btn-primary" name="ok"> OK</button>
    </div>


}

<div id="orders-container">
    <img id="Type_I" src="~/App_Images/Type_I.png" class="img-responsive hidden" />
    <img id="Type_II" src="~/App_Images/Type_II.png" class="img-responsive hidden" />
    <img id="Type_III" src="~/App_Images/Type_III.png" class="img-responsive hidden"/>
</div>
Index model is described by class IndexVM:
public class IndexVM
    {
        public IndexVM()
        {
            this.Orders = new OrdersVM();
        }

        public OrdersVM Orders { get; set; }
    }

_Orders model is described by class OrdersVM:

public class OrdersVM
    {

        [Required]
        public string Name { get; set; }

        public string Info { get; set; }

        [Required]
        public TypeEnum Type { get; set; }

        public List<SelectListItem> TypeControlDataSource { get; set; }
    }


public enum TypeEnum
{
    I,
    II,
    III
}

After change of value in DropDownListFor control with id=”Type”, the picture from hidden field should be injected by jquery code located in Index view into container with id=”order-current” and after that operation the ajax-form should be submitted. It works properly but after calling

return PartialView("~/Views/Home/_Orders.cshtml", dataVM.Orders);

from the HomeController, the field Info is updated properly but the injected picture from the “order-current” div container is gone. I tried to see what's wrong in Google Chrome using F12 button and there are no errors but appeared an infinite loop in “browserLink” script. I can't explain why. All I want is to see the injected picture in container with id=”order-current after submitting the ajax-form. How to do this and what I did wrong?

Answer 1

Thanks to my friend I finally solved the problem. After updating the “result” container, all events added by jQuery to controls located in this container are unpinned. That's why it crashes. The way to make it work correctly is to create a function and pin it to the event OnComplete of AjaxBeginForm. After each update of the result container via ajax, this function is called. I also made a small mistake in Home controller because I inserted a wrong view model class. After all changes, it looks like this; Home controller code:

public class HomeController : Controller
    {
        [HttpGet]
        public ActionResult Index()
        {
            IndexVM dataVM = new IndexVM();
            GetControlsDataSource(dataVM.Orders);

            return View(dataVM);
        }

        private static void GetControlsDataSource(OrdersVM dataVM)
        {
            List<SelectListItem> typeControlDataSource = new List<SelectListItem>();
            foreach (var en in Enum.GetValues(typeof(TypeEnum)))
            {
                SelectListItem item = new SelectListItem();
                item.Text = en.ToString();
                item.Value = ((int)en).ToString();
                typeControlDataSource.Add(item);
            }
            dataVM.TypeControlDataSource = typeControlDataSource;
        }


        [HttpPost]
        public ActionResult Pay(OrdersVM dataVM)
        {
            GetControlsDataSource(dataVM);
            if (ModelState.IsValid)
            {
                dataVM.Info = "Info bla bla bla";
                return PartialView("~/Views/Home/_Orders.cshtml", dataVM);
            }
            else
            {
                return View(dataVM);
            }

        }
    }

Index view:

@model WebApplication16.ViewModels.Home.IndexVM
@{
    ViewBag.Title = "Index";
}

@Html.Partial("~/Views/Home/_Orders.cshtml", Model.Orders)

<div id="orders-container">
    <img id="Type_I" src="~/App_Images/Type_I.png" class="img-responsive hidden" />
    <img id="Type_II" src="~/App_Images/Type_II.png" class="img-responsive hidden" />
    <img id="Type_III" src="~/App_Images/Type_III.png" class="img-responsive hidden" />
</div>

@section scripts{
    <script src="~/Scripts/jquery.validate.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
    <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
    <script>

        function imageOnChangeEvent() {
            $("#ajax-form").submit();
        }

        function OnCompleteAjaxForm() {

            $('#order-current > img').remove();
            var currentOrder = "#Type_" + $("#Type").find('option:selected').text();

            var $img = $(currentOrder).clone();
            $img.removeClass("hidden");
            $("#order-current").append($img);
        }

    </script>

}

_Orders partial view code:

@model WebApplication16.ViewModels.Home.OrdersVM

    <div id="result">
        @using (Ajax.BeginForm("Pay", "Home", new AjaxOptions
        {
            InsertionMode = InsertionMode.Replace,
            UpdateTargetId = "result",
            OnComplete = "OnCompleteAjaxForm()"
        }, new { id = "ajax-form" }))
        {

            <div id="order-current">

            </div>


            <div>
                @Html.TextBoxFor(x => x.Name, new { @class = "form-control", style = "margin-top:10px;", id = "Name" })
                @Html.ValidationMessageFor(x => x.Name)
            </div>

            <div>
                @Html.DropDownListFor(x => x.Type, Model.TypeControlDataSource, new { @class = "form-control", style = "margin-top:10px;", id = "Type", onchange = "imageOnChangeEvent()" })
                @Html.ValidationMessageFor(x => x.Type)
            </div>
            <div>
                <p>@Model.Info</p>
            </div>
            <button type="submit" class="btn btn-primary" id="button_ok" name="ok"> OK</button>


        }
    </div>