Question

在我的应用程序中，我有一个所有视图的公共布局，从一个视图（Index.cshtml）我使用Ajax.BeginForm显示另一个视图作为响应代码为

@using (Ajax.BeginForm("Edit", "Home", new AjaxOptions { UpdateTargetId = "content",InsertionMode=InsertionMode.Replace }))

现在我的问题是作为响应，编辑视图按预期呈现，但是不包括编辑视图中的脚本块，因此不执行javascript。

@model Test.Models.CARE
   @{
    ViewBag.Title = "Edit";
}
<script>
    function s() {
        alert("hi");
    }
</script>
<h2 style="padding: 0px; margin-top: 0px;"> Edit</h2>
@using (Html.BeginForm("SaveForConfirmation", "Home"))
{

Plz帮助。

Answer 1

将javascript代码放入视图中是不好的做法，更不用说部分视图了。因此，我建议您在单独的javascript文件中将此javascript代码外部化为单独的函数。

然后你可以订阅Ajax.BeginForm帮助器的OnSuccess事件：

@using (Ajax.BeginForm("Edit", "Home", new AjaxOptions { OnSuccess = "editSuccess", UpdateTargetId = "content", InsertionMode = InsertionMode.Replace }))
{
    ...    
}

然后在单独的 javascript文件中定义editSuccess函数：

function editSuccess(result) {
    alert('hi');
}

现在在您的局部视图中，您应该只留下部分标记中应该包含的内容。摆脱任何<script>标签，您不需要它们。您不需要任何内联脚本。它们只会增加网页的大小并浪费带宽，因为它们无法被浏览器缓存：;

@model Test.Models.CARE
<h2 style="padding: 0px; margin-top: 0px;">Edit</h2>
@using (Html.BeginForm("SaveForConfirmation", "Home"))
{
    ...
}

更新：

如果你有一些写得不好的javascript，它依赖于局部内部的ViewBag这样的垃圾，你可以在OnSuccess回调中调用相应的函数：

@using (Ajax.BeginForm("Edit", "Home", new AjaxOptions { OnSuccess = "s", UpdateTargetId = "content", InsertionMode = InsertionMode.Replace }))
{
    ...    
}

请注意我是如何定义OnSuccess = "s"的，其中s是您在partial中定义的函数，在这种情况下将调用该函数。但我再次重申，这是一种错误的方法，只有在你没有时间正确重构代码时才能使用。

Answer 2

最后已经实现了所需的功能。

这就是我做的方式

查看（来自何处进行通话）

<input type="submit" value="Create" />
@using (Ajax.BeginForm("Edit", "Home", new AjaxOptions {OnSuccess="DisableControls()",
InsertionMode= InsertionMode.Replace,UpdateTargetId="DivToUpdate" }))

控制器

[HttpPost]
    public ActionResult Edit(FormCollection fc)
    {
        if (fc.Keys[0].ToString().TrimEnd() == "Display")
        {
            TempData["readonly"] = "readonly";
        }
        else
            TempData["readonly"] = "";

被叫部分视图

@model TestApp.Models.CUSTOMER
@{
    ViewBag.Title = "Edit";
}
<script>
function s() {
    var readonly="@TempData["readonly"].ToString()";
    if(readonly=="readonly")
       { 
       $('input[type="text"],select').attr('readonly','readonly');         
       $("#Save").remove();
       }
}
</script>
<h2 style="padding: 0px; margin-top: 0px;">
Edit</h2>
@using (Html.BeginForm("Save", "Home"))
{


@Html.ValidationSummary()

<fieldset>
    <legend>CUSTOMER</legend>
    <table style="margin: 0px auto;">
        <tr>
            <td>

现在，在诊断上次失败尝试的原因时，我在脚本中写了一个alert()来查看脚本是否正在执行。

<script>
   function s() {
       var readonly="@TempData["readonly"].ToString()";var s="hi"+ prompt("name","");
       alert(s);
       if(readonly=="readonly")
          { //To make all text boxes and dropdown readonly
            $('input[type="text"],select').attr('readonly','readonly');         
            $("#Save").remove();//To Remove the save button
          }
       }
</script>

进一步查看firebug我可以看到响应包含脚本

<script>
function s() {
    var readonly="readonly";var s="hi"+ prompt("sdfs","kakaji");
    alert(s );
    if(readonly=="readonly")
       { 
       $('input[type="text"],select').attr('readonly','readonly');         
       $("#Save").remove();
       }
}
</script>
<form action="/Grid/Save" method="post"><div class="validation-summary-valid" data-valmsg-summary="true">  
<ul><li style="display:none"></li></ul>
</div>
<fieldset>
    <legend>CUSTOMER</legend>
    <table style="margin: 0px auto;">
        <tr>
            <td>
                <div class="editor-label">

但是发现生成的页面不包含我找到原因的脚本here

因此，这解决了我的问题，并给了我一个原因，我为什么无法从Ajax响应中看到或看到我的脚本标记。

脚本块不包含在ajax响应中

2 个答案: