In my layout, I include my script code from the view.
@if (IsSectionDefined("VSscript"))
{
@RenderSection("VSscript");
}
Within the view, I define the script section @section VSscript { and set up an Ajax form that connects to a partial view.
@using (Ajax.BeginForm("CreateServiceQuote", "Service", new AjaxOptions() { HttpMethod = "POST", UpdateTargetId = "ajaxCreate", OnSuccess="quoteSuccess" }))
The ajax portion contains the code for the partial view:
@Html.Partial("SQcreate")
All my javascript is stored in the VSscript section in the view. The partial view only includes the necessary controls. Everything works fine initially, but after one round of validation, the javascript no longer runs. The Ajax onsuccess part always runs, but the code inside my document.ready does not execute. Here's my controller, which simply calls the partial view if it's not valid:
public ActionResult SQcreate()
{
var model = new ServiceModel();
return PartialView(model);
}
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult CreateServiceQuote(ServiceModel model)
{
if (ModelState.IsValid)
{
context.Serv_Quotes.Add(serviceQuote);
context.SaveChanges();
ModelState.Clear();
return Json("QuoteSuccess", JsonRequestBehavior.AllowGet);
}
return PartialView("SQcreate", serviceModel);
}
This is the layout:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Titler</title>
@Styles.Render("~/Content/css")
@Styles.Render("~/Content/themes/base/css")
@Scripts.Render("~/bundles/modernizr")
@if (IsSectionDefined("VSscript"))
{
@*@RenderSection("VSscript");*@
@RenderSection("VSscript", required: false)
}
</head>
...
And this is the view:
@model PartNumbers.Models.ServiceModel
@{
HtmlHelper.UnobtrusiveJavaScriptEnabled = true;
Layout = "~/Views/Shared/_LayoutPageI.cshtml";
ViewBag.Title = "Virtual Service";
}
@section VSscript {
<script type="text/javascript">
$(function () {
$("#btnSQopenCon").on("click", function () {
$("#AddSQcontact").modal("show");
})
// jQuery UI Date Picker Class Object Name
$(".datepickerui").datepicker();
...
})
...