This problem is similar to what is described in Execute Javascript inside a partial view in ASP.NET MVC
The below piece of code in index.cshtml is working fine...
<label for="locationOfSearch"> in :</label> #Html.TextBox("locationOfSearch")
<input type="submit" value="Search" style="background-color:Green"/>
#section JavaScript {
<script type="text/javascript">
$(document).ready(function () {
$("#locationOfSearch").autocomplete({
source: '#Url.Action("AutocompleteAsyncLocations")'
})
});
</script>
}
But when I copy and paste the above code and the respective script files to a another view and then in index.cshtml if I call Html.Partial(new view name), Autocomplete is not working...
Kindly let me know how I solve it without much modification...
You cannot use sections in partial views. They simply don't work. So you will have to keep the #section JavaScript in the view in order to register scripts and then render the partial which will contain only the markup. You could also write custom helper methods to achieve this as shown in this answer.
Partial views need to have a reference to all scripts, even though you've already referenced it in the master/layout page. Create a partial view (ex: _Scripts.cshtml) and put all of your scripts and stylesheet references in it. Then call this partial view in every view:
#Html.Partial("_Scripts")
Related
I have a web page where I dynamically generate lots of elements from code behind and inject them into the page, as such:
input type="file" style="width:480px;" id="fileUploadLogo345">
I also have buttons for submitting, like this:
input id="Submit1" type="submit" value="Substituir Logo" onclick="return jsSubmitLogo(345);">
(The javascript function always returns true...)
No matter what I try, I am unable to get any of the uploaded files from code behind.
I tried adding enctype="multipart/form-data" to the form, I tried adding runat="server" to the file upload controls, I have no idea what else I could try. No matter what I do, in code behind Request.Files.Count equals zero.
Any idea what I could be doing wrong?
If it makes any difference, I am using a master page...
Thanks
You are using "id" attributes in your html... you should instead use "name" attributes, and everything will show up fine in code behind.
I want to fill a script type="text/html tag with a Meteor template.
So, this is an odd thing to do, I know. Half the reason I want to do this is because Cloud9 can't tell the difference between JS script tags and HTML script tags, and its syntax highlighting and tag-completion breaks when you try to write HTML in script tags. The other half of me is just curious to see if this is possible, because an ugly-as-sin workaround exists.
So this:
<body>
<script type="text/html" id="test">
{{> test}}
</script>
</body>
<template name="test">
<span>Test</span>
</template>
Produces this:
<script type="text/html" id="test">
<!--label:YRgyaMH8-->
</script>
Anyone have a way to force it to render the template, instead of what looks like evaluate the name as a comment?
Submitting another answer b/c I'd like to keep my previous one just for the records. I think this approach will work better though.
Inside your html, you're going to define two sections. The first is where you're going to place your template code. It will go inside a comment inside a plain div tag. The second is where the template will be placed for Knockout to consume. It looks like this:
<template name="koTemplate">
<div id="myTemplate">
<span>Here is my template with children</span>
</div>
<script type="text/html" id="test"></script>
</template>
Then in your client JS code, you're going to add a callback to run when the template is rendered
Template.koTemplate.rendered = function () {
// Get the first node, then get the content inside of it
var templateHtml = this.firstNode.innerHTML;
// Remove the element so it doesn't get rendered
this.firstNode.parentNode.removeChild(this.firstNode);
// another option is to surround the contents inside the template w/comments, but that loses syntax highlighting
// Get the target node for placing the template in
var templateNode = this.lastNode;
// place the content from the original node to the target node
templateNode.innerHTML = templateHtml;
};
This will basically get the content of the template, remove the template, then place it inside the script tags. The result will look like:
<script type="text/html" id="test">
<span>Here is my template with children</span>
</script>
I would suggest moving away from using the script tag and instead use some other generic tag that Cloud9 won't treat as JS and Meteor won't fudge with. Using the example in my comment on the question, it would look something like this:
<div id="template">
<!--<span>test</span>-->
</div>
And in your JS you would parse that:
var template = document.getElementById('template').firstChild.nodeValue,
result = parseTemplate(template, values);
That's the basic idea. You'd have to convert it over to Knockout's template parsing after getting the result.
I'm using ASP.NET MVC 3 with the Razor template engine for my website. I currently allow files uploads like this:
<form action="/File/Upload" method="post" enctype="multipart/form-data">
<label for="file">Upload a file:</label>
<input type="file" name="file" id="file" />
<input type="submit" name="submit" value="Submit" />
</form>
But would like to use a 3rd party control such as NeatUpload, which allows a progress bar, multi file selection, etc.
In the documentation, they show the control being used like this:
<%# Register TagPrefix="Upload" Namespace="Brettle.Web.NeatUpload"
Assembly="Brettle.Web.NeatUpload" %>
<Upload:InputFile id="inputFileId" runat="server" />
with some code-behind.
The Razor engine understandably doesn't like this syntax. Is there another way to use 3rd party controls with it, or am I out of luck?
Third party controls that work with Web Forms aren't really compatible with a pure MVC application. Having said that, you may be able to work with a hybrid type of solution, leveraging Web Forms in certain places and MVC in others. It's not something I would do personally, but you could.
See this post by Scott Hanselman which goes into some detail about doing just that.
Using a web forms control on a Razor page just won't work though.
Specifically for NeatUpload (which is amazing!) there is now the ability to get the uploading of very large files using javascript on a static HTML page. Clearly this will work just as well with MCV whatever view engine you use :)
http://www.brettle.com/NeatUpload-1.3/dotnet/docs/Manual.html#3.11.Using%20NeatUpload%20from%20JavaScript%7Coutline
So more general solution "ask the developer of the user control to update to an MCV compatible version"
Edit: I won't change the above but note that NeatUpload is now hosted http://neatupload.codeplex.com/ but maybe dead (why not pick it up if you have the developer skills and time!)
The Razor view engine does not support WebForms controls. You will need to find a library that is specifically designed to work with MVC.
I just found that the MVCRecaptcha project that appears to be doing exactly this. I haven't had the time to dig through the internal details, but the essence is contained in two small files. For those of you too lazy to follow the above link, let me try to explain:
Basically, they create the control programmatically, then call RenderControl to dump the html on the wire:
var captchaControl = new RecaptchaControl { ... }
var htmlWriter = new HtmlTextWriter(new StringWriter());
captchaControl.RenderControl(htmlWriter);
return htmlWriter.InnerWriter.ToString();
On the response side, they then create an attribute that you can add to your MVC actions:
class CaptchaValidatorAttribute : ActionFilterAttribute {...}
This class that re-creates the control, and calls:
var recaptchaResponse = captchaValidtor.Validate();
// this will push the result value into a parameter in our Action
filterContext.ActionParameters["captchaValid"] = recaptchaResponse.IsValid;
Which means that your controller will have to look something like this:
[CaptchaValidator]
[AcceptVerbs( HttpVerbs.Post )]
public ActionResult CreateComment( Int32 id, bool captchaValid )
{
if (!captchaValid)
{
ModelState.AddModelError("_FORM", "You did not type the verification word correctly. Please try again.");
}
// ...
}
Although the project is now obsolete, it shows how to use an ASP.Net control in an MVC application.
You can do this, assuming you just want a render of the control content and don't care about registering scripts or postbacks, etc.
Create your own HtmlTextWriter, write the output to it, and then render that string in your Razor. This is basically the idea from #VeeTheSecond, reduced to practice:
#{
System.Web.UI.WebControls.Label label = new System.Web.UI.WebControls.Label()
{
Text = "Hello World!"
};
HtmlString renderedControl;
using (StringWriter w = new StringWriter())
{
using (HtmlTextWriter htmlW = new HtmlTextWriter(w))
{
label.RenderControl(htmlW);
renderedControl = new HtmlString(w.ToString());
}
}
}
<div>
#renderedControl
</div>
Try placing the control in a <form runat="server"> tag.
I have a asp:DropDownList element that I need to reference in my code behind but I need it to have a very specific name that has special characters so I cannot use that as the id.
Is it possible to manually set the name in the .aspx file? When I try to do it now:
The html is rendered with two name attributes.
The name attribute is automatically generated which means you can't set it. But you can access it through the ClientID property of the control.
While not exactly as OP requested, the name attribute can be changed using JavaScript or jQuery after the page is loaded. This is assuming you can put the desired name elsewhere. For example, say you set the Class attribute of the DropDownList to "MyValue123", you could then add a JavaScript on-click handler either on page load or on Submit (the following assuming jQuery support):
<select class="MyValue123">
</select>
<script type="JavaScript">
function fixSelectNames(){
$("select").each(function(){
$(this).attr("name", $(this).attr("class"));
});
}
$(document).ready(function(){
fixSelectNames();
});
</script>
<input type="submit" value="Go" onclick="fixSelectNames();" />
Naturally the JavaScript code could be written via ASPX so that it contains the correct values for "MyValue123". When placed in a Submit button's JavaScript on-click handler, the code will execute before the parameters are posted by the browser, resulting in the server receiving the value under an updated name.
Hello all I have a problem. I have a masterpage that all of my Content pages inherit from. Within this masterpage I have a script tag pointing to the Javascript file folder ~/Scripts/validation.js
On my content pages I use different usercontrols that require the use of many of the functions within the validation.js file however if I dont put the <script> tag and the Javascript functions within a contentholder on the contentpage the usercontrols do not see these functions and I get errors like OnNameValidation is not defined.
Of course I can copy the Javascript code into all of the pages but that's 30+ pages and a maintenance nightmare if I find a bug in one of the Javascript functions.
So the question (if you haven't already figured out from my long dissertation) is how can I declare the script tag with the path to the validation.js file so that contentpages and their usercontrols etc. can access the functions/code.
What you are trying to do should work, so I suspect that the path to your javascript file is wrong (without seeing your html code I can only assume). Keep in mind that you can only reference the javascript file like this: "~/Scripts/validation.js" if you have the link in a HEAD runat="server" tag. Without the runat="server" it won't find the file. You would have to do something like "../scripts/validation.js"
As a test I would try to call your javascript function in the masterpage, so you can rule out a bad file reference.
I picked up this tip from ScottGu here.
Add this to you user control which enables Intellisense in user controls but always evaluates false:
<% if (false) { %>
<script src="/Scripts/validation.js" type="text/javascript"></script>
<% } %>
I am currently doing this in my site by going to the Source code on the master page and putting the following in the head and outside of the ContentPlaceHolder.
<head>
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
<script src="CP.js" type="text/javascript"></script>
</head>
The path you are assigning for your js file is probably not matching in all the pages.
script src="../JavaScript/Scriptaculous/scriptaculous.js"
It should have something like above this if you have separate folder for Scripts, MasterPages, Pages & Controls.