What's the proper way to go about it. I need it to work like in the example below.
<input type="button" value="Resume" onclick="window.location = '/Test?testid=@(ViewBag.TestID)'" />
-
3I think in this case the best way is to make it as a link, not a button.Zabavsky– Zabavsky2013-07-02 06:51:19 +00:00Commented Jul 2, 2013 at 6:51
Add a comment
|
4 Answers
I absolutely support Zabavsky's comment that you should use an ActionLink for this specific example in order to have semantically correct markup.
But since you asked:
Mixing razor syntax with Javascript in views
Never do that.
In your view you should have only markup:
<input type="button" value="Resume" id="myButton" data-url="@Url.Action("Test", new { testid = ViewBag.TestID })" />
and javascript (IN A SEPARATE FILE) where you could work with this markup and unobtrusively enhance it:
$(function() {
$('#myButton').click(function() {
window.location.href = $(this).data('url');
});
});
Of course if the user has javascript disabled your web application is completely busted. That's why you should always write semantically correct markup. In this case that would be to use an anchor because in HTML buttons are used to submit forms, anchors are used to redirect to some other location (which is exactly what you are trying to achieve in this specific case).
3 Comments
LaserBeak
Yeah, that looks like the valid way to go about it. Otherwise not worried about users not supporting javascript, this website will be comprised of many single page, ajax driven apps, hence javascript is essential anywhere.
Darin Dimitrov
That's not a valid reason to use semantically incorrect markup.
rsc
Perfect. Thanks man. Just 1 thing, it should be: <input type="button" value="Resume" id="myButton" data-url='@Url.Action("Test", new { testid = ViewBag.TestID })' /> (using ' and not " inside data-url)
I would, as Zabavsky said, use an ActionLink for this:
Something like this:
@Html.ActionLink("Resume", "Test", new { testid = ViewBag.TestID })
There are quite a few overrides for actionlink, so you need to pick the one which fits your needs.
The one above output an a href with the text 'Resume' going to action 'Test' on the current controller, passing a routevalue of testid = ViewBag.TestID
1 Comment
LaserBeak
Indeed, the best way would be to make it a link. Though my primary question is how to mix razor syntax with JS in the view and if this is at all possible without breaking conventions/using hacks etc.
You can do it like:
<html><head><script>function newDoc() { window.location.assign("http://www.abc.com") }</script></head><body><input type="button" value="Load new document" onclick="newDoc()"></body></html>
Hope it will help. Thanks.
2 Comments
Praveen Prajapati
JavaScript can be used in a Razor View. It seems you do not want to use JavaScript and looking for something similar in using Razor syntax only...right ? so better use @Html.ActionLink. Let me know if u r looking for something else if I am not understanding your requirement correctly.
Well, what you wrote is valid. You may have VS underline your code in red cause it think you have a js error due to the '' string not ended... but if you run it, it works.
To avoid red underline, you could do :
@{string js = "window.location = '/Test?testid="+ViewBag.TestID+" '";}
<input type="button" value="Resume" onclick="@js" />
