script block not include in ajax response - asp.net-mvc

Question

In my application I have a common layout for all the views, from one of the view(Index.cshtml) i have used Ajax.BeginForm to display another view as a response the code for this is
#using (Ajax.BeginForm("Edit", "Home", new AjaxOptions { UpdateTargetId = "content",InsertionMode=InsertionMode.Replace }))
now my problem is as a response the edit view is rendered as expected but the script block with in the edit view is not included and hence the javascript is not executed.
#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 help.

Answer 1

It's bad practice to put javascript code in views, let alone partial views. So I would recommend you to externalize this javascript code in a separate function in a separate javascript file.
And then you could subscribe to the OnSuccess event of the Ajax.BeginForm helper:
#using (Ajax.BeginForm("Edit", "Home", new AjaxOptions { OnSuccess = "editSuccess", UpdateTargetId = "content", InsertionMode = InsertionMode.Replace }))
{
...
}
and then define the editSuccess function in a separate javascript file:
function editSuccess(result) {
alert('hi');
}
now in your partial view you should leave only what is supposed to be in a partial - markup. Get rid of any <script> tags, you don't need them. You don't need any inline scripts. They only increase the size of your webpages and waste bandwidth as they cannot be cached by the browsers:;
#model Test.Models.CARE
<h2 style="padding: 0px; margin-top: 0px;">Edit</h2>
#using (Html.BeginForm("SaveForConfirmation", "Home"))
{
...
}
UPDATE:
If you have some poorly written javascript that depends on crap like ViewBag inside the partial then you could invoke the corresponding function from within the OnSuccess callback:
#using (Ajax.BeginForm("Edit", "Home", new AjaxOptions { OnSuccess = "s", UpdateTargetId = "content", InsertionMode = InsertionMode.Replace }))
{
...
}
Notice how I have defined OnSuccess = "s" where s is the function that you have defined in your partial and which will be invoked in this case. But I repeat once again, this is a wrong approach and should only be used if you don't have time to refactor your code properly.

Answer 2

Finally have achieved the required functionality.
this is how I have done it
View (from where the call was made)
<input type="submit" value="Create" />
#using (Ajax.BeginForm("Edit", "Home", new AjaxOptions {OnSuccess="DisableControls()",
InsertionMode= InsertionMode.Replace,UpdateTargetId="DivToUpdate" }))
The Controller
[HttpPost]
public ActionResult Edit(FormCollection fc)
{
if (fc.Keys[0].ToString().TrimEnd() == "Display")
{
TempData["readonly"] = "readonly";
}
else
TempData["readonly"] = "";
The Called Partial view
#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>
Now on diagnosing the cause for the previous failure attempt I wrote a alert() in the script to see whether the script is executing or not.
<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>
on further looking up with the firebug I could see that the response contains the script
<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">
But what found that the generated page doesn't include the script for which I found a reason here
Hence this solves my problem and gave me a reason behind the fact that WHY I could not see or watch my script tag from the Ajax response.