C# 从jQuery上下文启动的MVC控制器操作

我有一个类似于这两个StackOverflow Post和的问题。然而，我的情况完全不同，我无法做出必要的纠正

就像这两篇文章一样，当浏览器执行post控制器操作时，我似乎正在失去上下文

情况如下：

页面加载

用户单击添加按钮

“模式”对话框加载局部视图，其中包含添加新对象所需的字段

表单完成后，用户单击“保存”

添加的控制器操作完成（添加记录很好），然后重定向到步骤1的控制器操作。其思想是，这将关闭模式并在步骤1中返回用户页面

问题当然是重定向导致$（jquery）是未定义的错误

步骤1控制器操作：

public ActionResult Configure()
{
  ....code...
  return View("~/FolderPath.../Configure.cshtml", model);
}

第2步jQuery启动模式：

$("#new").click(function (e)
{
   e.preventDefault();
   var window = $("#window").kendoWindow(
   {
      content: {
                 url: "@Html.Raw(Url.Action("CreateEditRecord", "Controller"))",
                 data: { .... }
                }
            });
        window.data('kendoWindow').center();
});

第3步和第4步模式提交：

$("#save").click(function (e)
{
   e.preventDefault();

   ...some validation stuff here.....

   $("#formCreateEditRecord").submit();
});

步骤5（这些是我尝试过的不同方法，它们都失去了jQuery上下文）

编辑

---

@SSA和Ryos。你的解释很清楚，确实解决了问题，但如果你能再容忍我几秒钟

我理解部分视图没有完整页面的全部重量（脚本标记等）。我仍然不清楚的是，为什么它甚至回到了偏颇的观点？我在步骤5中的post controller操作重定向到配置操作，该操作是完整视图，因此我希望页面加载完整视图

MVC视图引擎在再次更改和重新加载整个页面之前，是否仍会呈现部分视图，即使只有几毫秒？

“@Html.Raw（Url.Action（“CreateEditRecord”、“Controller”）”

这是渲染局部视图。部分视图通常不具有完整页面的权重，例如，它们没有您的所有脚本标记

当它作为模态对话框的内容加载时，它（本身）没有jquery，因为您没有脚本标记来在局部视图上加载jquery

因此，要么将jquery添加到局部视图，要么在父窗口上参考jquery

"Note: I'm not sure if this next code stub will work or not as jQuery might be attached to the dom on the parent window and not find any elements on your Modal Window.  I know there is a way to do it though, you just might have to mess with your jQuery code a little bit.

$ = window.parent.$;
$("#save").click(function (e)
{
   e.preventDefault();

   ...some validation stuff here.....

   $("#formCreateEditRecord").submit();
});

使用Ajax，部分视图可以工作，因为它们用于更新原始页面的部分内容。然而，使用模式对话框，它是一个全新的页面（在子窗口中）

如果您使用的是像jQueryUI对话框这样的页面内模式对话框解决方案，那么您可以从原始页面使用jQuery

我建议为局部视图设计一个基本模板，比如

<div class="modal-dialog">
    <div class="title">@this.ViewBag.ModalTitle</div>
    <div class="body">
        @RenderBody()
    </div>
</div>
<!--Load Scripts/Styles Here-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
@RenderSection("scripts", false)

@this.ViewBag.modaltile
@RenderBody（）
@RenderSection（“脚本”，false）

然后可以创建使用它的局部视图，如

@{
    Layout = "~/Views/Partials/Dialogs/BaseDialog.cshtml";
}
<p>This is a test dialog</p>
@section scripts 
{
    <script src="anotherscripttoaddhere" />
}

@{
Layout=“~/Views/Partials/Dialogs/BaseDialog.cshtml”；
}
这是一个测试对话框

@节脚本
{
}

我认为还有两个步骤

手动提交表单

数据库操作后，从action CreateEditRecord返回JsonResult

//控制器动作中

  public JsonResult CreateEditRecord(NewRecordModel model)
  {
   // Do your database stuff here....
   //Then return Success or Failure based on your database result.
   return new JsonResult { Data = new { Result = "Success/Failure" } };
  }

然后，当您调用提交表单时

$("#save").click(function (e)
{
   e.preventDefault();

   ...some validation stuff here.....
    $("#formCreateEditRecord").submit(
    function(e){
    e.preventDefault(); //As we will manually submit the form
     $.ajax({
         type: "POST",
         url: "@Html.Raw(Url.Action("CreateEditRecord", "Controller"))",
          data: $(this).serialize(),
          success: function(data) {
             //here we check if database called resulted in Success/Failure
             if(data.Result === "Success")
             {
              //Write your code to close the dialog.
             }else 
             {
              //Show error message or whatever.
             }
           }
        })
    });
}

$("#save").click(function (e)
{
   e.preventDefault();

   ...some validation stuff here.....
    $("#formCreateEditRecord").submit(
    function(e){
    e.preventDefault(); //As we will manually submit the form
     $.ajax({
         type: "POST",
         url: "@Html.Raw(Url.Action("CreateEditRecord", "Controller"))",
          data: $(this).serialize(),
          success: function(data) {
             //here we check if database called resulted in Success/Failure
             if(data.Result === "Success")
             {
              //Write your code to close the dialog.
             }else 
             {
              //Show error message or whatever.
             }
           }
        })
    });
}