I've got a traditional User Control, I have the following structure:
<asp:Content id="ContentBody" runat="server" ContentPlaceHolderId="MainContent">
<Core:AccountApplication id="uxAccountApplication" runat="server" />
</asp>
Inside the User Control I have a traditional:
<form id="AccountForm">
<input type="text" id="txtCompany" name="Company" />
<input type="submit" id="btnSubmit" />
</form>
The problem occurs when I call $('#AccountForm').serialize(); the request is constantly empty, nothing is serialized. If I do $('form').serialize(); it does serialize, but it also grabs all of the Web-Form ViewState rendering. Which requires some dubious approaches to correct.
Is there a better way to tackle?
Nested forms are not allowed in ASP.NET (see this question for example).
Your <form id="AccountForm"> element will be removed by ASP.NET (look at the generated HTML to confirm that).
After the answer received where it was denoted that the form element is removed, I verified and the entire form was indeed removed. So I did the following:
<div class="Application-Container">
<!-- All my form inputs -->
</div>
Wrapped them into a container, then I used jQuery to wrap the container into a form.
$('.Application-Container').wrap('<form id="AccountForm"></form>');
Now when you submit, it will rewrap into the form, then I can call $('#AccountForm').serialize() and it will correctly build my form data.
Related
I have an ASP.NET site and need to post some hidden form fields to SagePay so that my customers can pay for goods. I am using the following method to do this:
<input type="hidden" name="VPSProtocol" value="2.23" />
<input type="hidden" name="Currency" value="gbp" />
<input type="hidden" name="TxType" value="PAYMENT" />
<input type="hidden" name="Vendor" value="myvendorname" />
<input type="hidden" runat="server" id="crypt" name="Crypt" value="#<encrypted string>" />
<asp:Button ID="Button1" runat="server" Text="Pay Now" PostBackUrl="https://live.sagepay.com/gateway/service/vspform-register.vsp"/>
Now, If I use this code in a standard ASP.NET form, this works fine - SagePay accepts the posted information and continues with the payment process. However, if I use the same code inside a content page with a master page, Sagepay displays the following error screen:
5030 : We could not process your message, please check your
integration settings or contact the support team.
It seems as if the hidden fields are losing their value because of the master page.
Could anyone tell me what could be happening here and if there is anything I can do to rectify the situation. I need to use the SagePay Form method and I need to use a masterpage.
I haven't used webforms for a while but from memory by default it changes the names of your elements based on their container to allow navigation and identification server side: MSDN documentation here.
This means that your posted values are not under the name you expect them to be.
In my ASP .Net Form application I need to post some data using hiddenfields.
Need to set the values dynamically in page load in the code behind file
Have to use the hidden fileds in a web form which using a masterpage.
I have to add runat="server" attribute as need to access the field in code behind file to assign value dynamically..... There the problem begins.
eg:
<input type="hidden" runat="server" id="uname" value="abc" />
converts to following by ASP .Net in run time
<input name="ctl00$content$uname" type="hidden" id="content_uname" value="abc" />
So a diffrent filed name="ctl00$content$uname" gets posted.
I tried adding ClientIDMode="Static" but still a different named field creates by ASP .Net in run time for name field as following
<asp:HiddenField ID="uname" runat="server" Value="abc" ClientIDMode="Static" />
Converts to following by asp .net
<input type="hidden" name="ctl00$content$uname" id="uname" value="abc" />
If somebody can guide me of how to post values using hiddenfields by assingning values in run time in code beghind in a masterpage environment in ASP .Net, would be really grateful. Thanks...
Any time you use runat="server" you essentially give WebForms control over that, well, "control". Which means that WebForms is going to dictate the resulting markup. Since you need granular control over the markup, you need to create it manually:
<input type="hidden" name="uname" />
Since this is just plain HTML, the WebForms rendering engine won't modify it. Then to assign a value to this from server-side code, you'd use an inline server-side statement:
<input type="hidden" name="uname" value="<%= SomePageMember %>" />
In this case, SomePageMember is a public or protected class member for the page's class. Something like this:
protected string SomePageMember { get; set; }
This will allow the UI page (which inherits from the code-behind class) to inject that value directly in the markup, while still giving you granular control over the markup itself.
You could have the value set via a server tag and not user runat="server"
<input type="hidden" runat="server" id="uname" name="uname" value="<%= HiddenValue %>" />
Create a global variable named HiddenValue and set the value when the page loads.
Edit: Just realized that this the same advice as #Bartdude.
I am populating a ListView with HTML from a database using a Literal with Text='<%#Eval("HTMLData")'%>. When I trigger a PostBack, changes to the loaded HTML are not being reflected in litRowData.Text.
ViewState is enabled for the page, the ListView, and the Literal in the ItemTemplate, and I am making sure to only populate the ListView with initial values from the database when if(!IsPostBack) is true in Page_Load.
<asp:ListView ID="lvForm" runat="server"
DataKeyNames="RowID" ItemPlaceholderID="phRow"
EnableViewState="true">
<LayoutTemplate>
<asp:PlaceHolder ID="phRow" runat="server" />
</LayoutTemplate>
<ItemTemplate>
<asp:Literal ID="litRowData" runat="server" Text='<%#Eval("HTMLData")%>'
EnableViewState="true"></asp:Literal>
</ItemTemplate>
</asp:ListView>
I need to be able to capture changes to the contents of the loaded HTML controls. Since this HTML comes from a database table, I can't just use ASP controls inside the ItemTemplate. Can anyone see something I'm missing, or suggest an alternative way to do this?
Edit:
To clarify a little more, I'm trying to load form input elements dynamically from a database, render them as HTML controls on the page, allow the user to modify their contents by entering text or selecting options, then capture the modified HTML and save it back to the database when the user clicks a save button.
The way postback works in .NET is actually a wrapper around the more basic idea of HTML forms. A basic example of HTML forms is:
<html>
<body>
<form action="" method="POST">
<input type="text" value="type here" />
<input type="submit" value="go" />
</form>
</body>
</html>
Roughly, what the .NET abstraction adds is:
<html>
<body>
<form action="" method="POST">
<input type="hidden" name="__VIEWSTATE" value="string-encoded-value" />
<input type="text" name="bob" value="type here" />
<input type="submit" value="go" />
</form>
</body>
</html>
Whereby on postback to your page, all input elements with names are mapped back into properties of your Page object, and the __VIEWSTATE hidden field is deserialized into all properties of objects that do not correspond to values of html input tags. For example, if Page.bob had a DateTime property associated with it, it would be stored in __VIEWSTATE possibly.
ASP.NET Literal tags in Page markup will get printed into the browser exactly as is, meaning that if you have <span>bob</span> as its value, that is how it will appear within the <form> tag. However, in plain HTML world, <form> tags when posted will only contain the values of certain form elements (aka not every div, span, p etc. gets posted back, only input, select, textarea and some others). So if your literal doesn't contain an input then it won't even get posted back meaning __VIEWSTATE will be used to restore the Value property of the Literal back to its initial state.
To fix this, you probably don't want to stick html into a Literal because even if you do it's not clear that it will get associated with the right property of your page. Instead, try a TextBox element or something else that gets written as an input element directly by the ASP.NET webforms code. Alternatively, try using javascript to allow modifications of flat text in divs if you don't need to persist the data.
This answer builds on the prior one now that you have a .NET TextBox control that is correctly posting back the value of edits. Right below it, you can add to code behind:
protected void Page_Load(object sender, EventArgs e)
{
litRowData.Attributes.Add("onKeyUp", "WriteText(this.value)");
}
Html:
<ItemTemplate>
<asp:TextBox ID="litRowData" runat="server" />
</ItemTemplate>
<div id="yourPreview"></div>
<script type="text/javascript">
function WriteText(val){
document.getElementById("yourPreview").innerHTML=val
}
</script>
I am writing a website master page with a form for member login
Below is the markup from the master page:
<form id="loginForm" action="account.aspx" method="POST">
<div class="div-topHead">
<input type="button" id="submitLogin" title="Login" value="Login" />
<input type="button" id="forgetPW" title="Forget password" value="?" onclick="window.open('forgetpassword.aspx','_self')" />
</div>
<div class="div-topTail">
<div class="div-login">
<div class="row-body row-def">
<input id="input_memID" name="input_memID" runat="server" type="text" maxlength="255" />
</div>
<div class="row-header row-def">
Member ID:
</div>
</div>
<div class="div-login">
<div class="row-body row-def">
<input id="input_memPW" name="input_memPW" runat="server" type="password" maxlength="255" />
</div>
<div class="row-header row-def">
Password:
</div>
</div>
</div>
</form>
and below is the posting script
$(function(){
$('#submitLogin').click(function(){
var f = $('#loginForm').get(0);
$.post("../script/loginCheck.aspx", { "memID": f.inputID.value, "memPW": f.inputPW.value }, function(data){
var result = JSON.parse(data);
if(result[0] == 1){
//Login validated
f.submit();
} else {
//Login is invalid
alert(result[1]);
}
});
});
});
The problem is, when i open the website on browser,
the text input field names are automatically added a prefix "c100$"
and then from console I can see I got below error
Uncaught TypeError: Cannot read property 'value' of undefined
I have tried to lookup on the net what is this happening,
and seems it is something .NET automatically does.
Yet I could not find a way to make my post script works.
I don't need to keep the ID as it was without ct100,
as long as the posting script can work
I tried changing to f.ct100$input_memID etc but not working
Also tried the clientIDMode="Static" but can't get it work either
the browser complains clientIDMode is not an attribute of <% PAGE %>
So could someone please kindly advise what can I do?
Thanks in advance!
ClientIDMode is a property that can be added to individual controls.
In addition (from MSDN):
You can set the ClientIDMode value for all pages in a Web site by setting the pages element in the site's Web.config file. You can set the ClientIDMode value for a page in the # Page directive.
This for instance:
<div id="dvDiv" runat="server" clientidmode="Static" />
Will make the div's name be "dvDiv" in both client and server side.
So $("#dvDiv") will work fine on the client side.
About your last remark, make sure you put it in <%# Page %> and not in <% Page %> (notice the # sign)
Although Blachshma's answer is perfectly reasonable and will solve your problem, I recommend simply taking off the runat="server" attributes on your inputs.
I can't see that you have any real reason to have these exist as HtmlInputText objects if you don't need to reference them from page code-behind.
EDIT: as per comment, if you do need to access them from code-behind, then it's a better idea to simply change the ClientIDMode to Static.
You can simply use this jquery selector to get any element you want :-
$("[id$='yourElementID']")// Select an Element whose ID ends with yourElementID
Example :-
$("[id$='submitLogin']").click(function(){
var f = $("[id$='loginForm']").get(0);
....................
See The Detailed Information here
If the Javascript code is contained inside the aspx markup, you can also use
var f = $('#<%= loginForm.ClientID %>').get(0);
The following code does not work. The markup is in a User Control and I suppose that's why ClientID returns the wrong prefix for the TextBox id.
Markup:
<INPUT id="txtName" runat="server" maxlength="50" style="WIDTH:100px">
<INPUT type="button" value="Find Your Doctor" id="btnFind" runat="server"
style="MARGIN-LEFT:10px;WIDTH:130px">
Code-Behind:
btnFind.Attributes.Add("onClick",string.Format("DoctorLink
('{0}',document.getElementById('{1}').value,{2});",
row["ZipCode"],
txtName.ClientID));
Results in browser:
<input name="DoctorsMainArea1$ctl01$txtName" type="text"
id="DoctorsMainArea1_ctl01_txtName" maxlength="50" style="WIDTH:100px" />
<input name="DoctorsMainArea1$ctl01$btnFind" type="button"
id="DoctorsMainArea1_ctl01_btnFind" value="Find Your Doctor" style="MARGIN-
LEFT:10px;WIDTH:130px" onClick="PrepareDoctorLink('90210',
document.getElementById('DoctorsMainArea1_ctl00_txtName').value);" />
As you can see, the parameter for the JavaScript call is DoctorsMainArea1_ctl00_txtName, but the actual id of the input element is DoctorsMainArea1_ctl01_txtName.
Any idea how to fix this? jQuery? I am not so much interested in an explanation of what's going on (maybe there is another control on this page that is interfering), but a more robust way to solve the problem.
I don't know which asp.net version you are using but in 4.0 you can declare inside any server control ClientIDMode="static" and it will give you the exact id in browser.
Example:
<asp:Textbox id="txtName" runat="server" ClientIdMode="static"/>
Others are predictable, inherit and it can be used with ClientIdRowsuffix.Can be used at page level and even on master pages and even in web.config file.
Example on web.config file:
<system.web>
<Pages clientIDMode="predictable"/>
other system web properties
</system.web>
Watched Craig shoemaker's Video at tekpub, you can also read more about it at Rick's bloglink text. It's pretty cool tho.
You should try moving the code that adds the onclick attribute to the button in the PreRender event (or OnPreRender override) in your page or user-control. That should probably get the ClientID right.
A fast solution:
btnFind.Attributes.Add("onClick",string.Format("DoctorLink
('{0}',document.getElementById('{1}').value,{2});",
row["ZipCode"],
"DoctorsMainArea1_ctl01_" + txtName.ClientID));
This happens because you have a content placeholder in your page somewhere.
another solution:
html tag:
<input type="text" name="txtName" id="txtName" />
code-bind:
string txtName_value = Request.Forms["txtName"];
and you can get the value
just use the html control.