Develop Reference

Is it possible to add both a css class AND a return confirm on an Html.ActionLink?

I'm just getting into MVC, so I'm not sure this can even be accomplished using an ActionLink. But what I'm trying to do is to have an Html.ActionLink that you can assign both a CSS class AND a return confirm.
I've gotten this to work:
#Html.ActionLink("Delete", "Delete", "NWS", new { recordId = Model.Id }, new { #class = "btn btn-danger configDelete" })
And I've gotten this to work:
#Html.ActionLink("Delete", "Delete", "NWS", new { recordId = Model.Id }, new { onclick = "return confirm('Are you sure you want to delete this config?')" })
But when I try adding both like so,
#Html.ActionLink("Delete", "Delete", "NWS", new { recordId = Model.Id }, new { #class = "btn btn-danger configDelete" }, new { onclick = "return confirm('Are you sure you want to delete this config?')" })
I get a syntax error that reads, "There is no argument given that corresponds to the required formal parameter 'routeValues' of 'IHtmlHelper.ActionLink(string, string, string, string, string, string, object, object)"
I've tried putting the return confirm before the CSS class too, but it didn't matter. Is this possible to do with an ActionLink? If not, is there something out there where I can do this?

Instead of separating them into their own objects, combine them into one object:
new { #class = "btn btn-danger configDelete", onclick = "return confirm('Are you sure you want to delete this config?')" }
Note that they're both just attributes for the resulting HTML element. You can add as many as you like. They just all need to be a part of the same object passed to the HTML helper method.

How can I make variable global in View?

I need to define below code as a global variable in the View and then I could use that value in my separate JS code. I don't know how to do this, I tried various things.
<td class="choice">
#Html.TextBoxFor(modelItem => item.ManualDate, new { #type = "date", #class = "form-control datepicker" }) //I want this #Html... to be global and available in .js file
</td>
So this part of my View should be declared somewhere on the top of partial View? In curly brackets?
#{
ViewBag.Title = "myTitle";
Layout = "~/Views/Shared/_Layout.cshtml";
var globalVar = "#Html.TextBoxFor(modelItem => item.ManualDate, new { #type = 'date', #class = 'form-control datepicker' })";
}
I refer to it in .js file but it doesn't work properly (in 'choice' data field string is showed instead of razor element):
finalChoice.innerHTML = '#Model.globalVar'

The razor syntax like #Html.TextBoxFor and #Model can only be parsed by the server, not JavaScript. Using variables in #{//...} will be parsed as a string. The JavaScript file in the parent page can directly call the elements in the partial view.
#Html.TextBoxFor can be placed in the view. But if you don’t want to show it in the view, please set its style to hide. Then you can get this element via its id.
In _part.cshtml(partial view)
<div id="part">
#Html.TextBoxFor(modelItem => modelItem.ManualDate, new { #type = "date", #class =
"form-control datepicker" })
</div>
example

Passing Razor syntax variable into javascript onclick of an Html Helper

Trying to render the page, and trigger a notification on button click. I have set this up to just do a pop up for now, since its an internal application for the higher ups.
The button in question is a simple razor syntax html helper with an onclick event to return a confirm dialog. However it seems I am unable to render the item variable for this.
#Html.ActionLink("Delete", "Delete", new { id = item.Id },
new { #class = "btn btn-warning",
onclick = "return confirm('WARNING: Delete #item.Id?');" })
this fails to render item.Id (the output of the surrounding foreach statement but instead outputs the string literal "#item.Id"
#Html.ActionLink("Delete", "Delete", new { id = item.Id },
new { #class = "btn btn-warning",
onclick = "return confirm('WARNING: Delete ' + item.Id + '?');" })
This renders the variable but since it is not a javascript variable it renders as "Delete undefined ?"
How can I use a variable from the foreach outside of the javascript passed into this dialog, to make the message more descriptive.

I was able to solve my own problem using string.Format in C#.
#Html.ActionLink("Delete", "Delete", new { id = item.Id },
new { #class = "btn btn-warning",
onclick = string.Format("return confirm('WARNING: Delete {0}?');", item.Id) })

You aren't closing your string properly. Try the following:
onclick = "return confirm('WARNING: Delete " + item.Id + "?');"
Your error is saying the javascript item item.Id is not defined because item is probably not defined in your js scripts.

Html.ActionLink onclick JavaScript function is not invoked and name of function is corrupted in output HTML

I looked at other question: how to call javascript function in html.actionlink in asp.net mvc? showing how to add onclick to #Html.ActionLink but in my case function I assigned to onclick is never invoked.
I tried these action links:
<p>#Html.ActionLink("Call number", "Call", new { id = Model.Id, number = Model.CellNumber, onclick = "javascript:alert(a);" }, new { #class = "btn btn-default" })</p>
<p> #Html.ActionLink("Call number »", "Call", new { id = Model.Id, number = Model.SecondaryPhoneNumber, onclick = "javascript:Call();" }, new { #class = "btn btn-default" })</p>
and the function looks like:
<script>
function Call(){
alert("BLA");
}
</script>
but no alert is shown in both cases(first and second button). Besides that action link wroks.
Question: What I did wrong?
EDIT:
Action links in html look like that and the look corrupted:onclick=Call%28%29%3B
<p><a class="btn btn-default" href="/Person/Call/7?number=113-456-789&onclick=alert%28a%29%3B">Call Cell Phone</a></p>
<p> <a class="btn btn-default" href="/Person/Call/7?number=98873213&onclick=Call%28%29%3B">Call Client's Secondary Number »</a></p>
and the function looks like it should:
<script>
function Call(){
alert("BLA");
}
</script>

You add onclick handler in wrong place. You must put it in Html Attributes block instead Route values.
Try it:
<p>#Html.ActionLink("Call number", "Call", new { id = Model.Id, number = Model.CellNumber }, new { #class = "btn btn-default", onclick = "alert('a');" })</p>

Does JavaScript get excuted when partial view is loaded?

Background
I'm working with ASP.NET MVC. I've got a partial view which contains JavaScript. I'm using AJAX get to load the partial view into a <div> tag. The JavaScript registers a click event for a group of radio buttons.
Problem
It doesn't seem to be executing: when the radio buttons are clicked, the form doesn't get submitted.
Here is my partial view:
<% using (Ajax.BeginForm(ActionName.Approve, ControllerName.Supervisor, new AjaxOptions { HttpMethod = "POST", InsertionMode = InsertionMode.Replace, UpdateTargetId = "Result"}, new { id = "IsSupervisorApprovalRequiredForm" }))
{%>
<p>Is supervisor approval required?</p>
<label for="IsSupervisorApprovalRequired">Yes</label><%=Html.RadioButton("IsSupervisorApprovalRequired", "0", new { #class = "IsSupervisorApprovalRequiredYes" })%>
<label for="IsSupervisorApprovalRequired">No</label><%=Html.RadioButton("IsSupervisorApprovalRequired", "1", new { #class = "IsSupervisorApprovalRequiredNo" })%>
<%} %>
<script type="text/javascript">
$("#IsSupervisorApprovalRequired").click(function() {
$("form#IsSupervisorApprovalRequiredForm").submit();
});
</script>
Question
Does JavaScript get executed when partial view is loaded?

Yes and no. The order of execution in your scenario is as follows:
Page gets requested
ASP.NET Renders Partial View into the parent page
Javascript gets executed on that entire page
For your particular problem. You'll need to load that Javascript snippet on page load before it can actually bound to the events. Your code should look like the following:
<% using (Ajax.BeginForm(ActionName.Approve, ControllerName.Supervisor, new AjaxOptions { HttpMethod = "POST", InsertionMode = InsertionMode.Replace, UpdateTargetId = "Result"}, new { id = "IsSupervisorApprovalRequiredForm" }))
{%>
<p>Is supervisor approval required?</p>
<label for="IsSupervisorApprovalRequired">Yes</label><%=Html.RadioButton("IsSupervisorApprovalRequired", "0", new { #class = "IsSupervisorApprovalRequiredYes" })%>
<label for="IsSupervisorApprovalRequired">No</label><%=Html.RadioButton("IsSupervisorApprovalRequired", "1", new { #class = "IsSupervisorApprovalRequiredNo" })%>
<%} %>
<script type="text/javascript">
$(function() {
$("#IsSupervisorApprovalRequired").click(function() {
$("form#IsSupervisorApprovalRequiredForm").submit();
});
});
</script>

Wrap the statement in $(function() {...}); so it will get called when the document is ready.
So it would look something like this:
$(function() {
$("#IsSupervisorApprovalRequired").click(function() {
$("form#IsSupervisorApprovalRequiredForm").submit();
});
});

This might also be caused by the HTML generated by the HtmlHelper. Multiple HTML elements with the same ID are not allowed, but the helper will generate something like:
<input id="IsSupervisorApprovalRequired" name="IsSupervisorApprovalRequired" type="radio" />
<input id="IsSupervisorApprovalRequired" name="IsSupervisorApprovalRequired" type="radio" />
As a result, when you match "#IsSupervisorApprovalRequired" with jQuery, it's looking for an element with that ID. Since two of them exist, the function will only be bound to the first one, causing the second radio button's "click" event to never fire.
As an alternative, try this:
$("input[name=IsSupervisorApprovalRequired]").click(function () { /* ... */ });
This approach checks the "name" attribute of the element instead of its ID. Since "name" values, unlike IDs, don't have to be unique, jQuery is able to handle multiple elements matching that pattern and should bind the event correctly.