I have a model with a fildValue1 parameter which has a string data type. when requested, the text can be displayed in the input tag but not in the textarea
<div>
<input type="text" asp-for="fildName1" value="#Model.fildName1" placeholder="name">
<textarea type="text" style="width: 200px" asp-for="fildValue1" placeholder="value">#Model.fildValue1</textarea>
<input type="checkbox" asp-for="fildInline1" > Inline
</div>
I tried different tags only works with Input tag. but i need line input capability
I have an encapsulated constructor like { get; set;} in a variable. I figured it out and it doesn't output value. When I change it to ="" it outputs the value, but now when I want to get it through form input it outputs an empty value
Change the
<textarea type="text" style="width: 200px" asp-for="fildValue1" placeholder="value">#Model.fildValue1</textarea>
TO
<textarea type="text" style="width: 200px" asp-for="fildValue1" placeholder="value"></textarea>
Related
I am using this HTML code (bootstrap) to allow users to enter tags
<div class="bootstrap-tagsinput"> <span class="tag label label-info">test tag<span data-role="remove"></span></span> <span class="tag label label-info">testing <span data-role="remove"></span></span> <span class="tag label label-info">issue <span data-role="remove"></span></span> <input size="1" type="text"> </div>
So the output
My question is, I cannot figure out how do I read this text in C# (asp.net Web forms) because it's not ASP:TextBox
Is this possible to read these tags in C#?
Thank you
So by looking at the documentation here: https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/ you should be applying data-role="tagsinput" to the input element. This means you should be able to do something like:
Important Update : I threw this together before my morning coffee had kicked in. Note that asp:button has become asp:TextBox
<div class="bootstrap-tagsinput">
<span class="tag label label-info">test tag<span data-role="remove"></span></span>
<span class="tag label label-info">testing <span data-role="remove"></span></span>
<span class="tag label label-info">issue <span data-role="remove"></span></span>
<asp:TextBox ClientIDMode="Static" ID="tags" runat="server" data-role="tagsinput" />
</div>
You can then access the values from tags as a comma delimited string.
Alteratively you could try
<div class="bootstrap-tagsinput">
<span class="tag label label-info">test tag<span data-role="remove"></span></span>
<span class="tag label label-info">testing <span data-role="remove"></span></span>
<span class="tag label label-info">issue <span data-role="remove"></span></span>
<input id="tags" runat="server" size="1" type="text" data-role="tagsinput" />
</div>
This will make the text input available as a comma delimited string server side, again using tags.
Finally the least webformy option, just give the input a name attribute
<div class="bootstrap-tagsinput">
<span class="tag label label-info">test tag<span data-role="remove"></span></span>
<span class="tag label label-info">testing <span data-role="remove"></span></span>
<span class="tag label label-info">issue <span data-role="remove"></span></span>
<input name="tags" size="1" type="text" data-role="tagsinput" />
</div>
You can then access it serverside with Request.Form["tags"], with, you guessed it, the tags as a comma delimited string.
Try this approach, using JQuery:
Client side:
<div class="bootstrap-tagsinput">
<span class="tag label label-info">test tag<span data-role="remove"></span></span> <span class="tag label label-info">testing <span data-role="remove"></span></span> <span class="tag label label-info">issue <span data-role="remove"></span></span>
<input size="1" type="text">
</div>
<input type="submit" id="sendTagsToServer" text="Send Tags To Server!"/>
<!--Both buttons are invisible, to postback and send parameters-->
<asp:Button ClientIDMode="Static" ID="postbackButton" runat="server"
Style="display:none;" />
<asp:HiddenField ClientIDMode="Static" ID="tagsString" runat="server" />
<script>
$(document).ready(function(){
$("#sendTagsToServer").on("click",function(){
//get values from tags
var tags= $(".tag");
//save values in hidden
var tagText = "";
tags.each(function(index){
tagtext = tagText + "&" + $(this).text();
});
$("#tagsString").val(tagText);
//postback to server
$("#postbackButton").click();
});
});
</script>
Server side:
protected void btnPB_Click(object sender, EventArgs e)
{
//read tags, server side
string[] param = tagsString.Value.Split("&");
}
The trick here is use two inputs, both hidden, one to postback and one to send parametters and of course, you can use Javascript instead of JQuery.
I am having a model with a float propert
public float Amount { get; set; }
and a text box to display anf edit the value of amount.
only number accepted
my text box should allow characters and on while entering it should show error message
here i want to add a validation to restrict only number and decimal point.
here my validation is not working when i enter characters in the text box.
When i checked i can see that upon entering characters on text box {{model.amount}} is turned to blank . I think this is the problem. Can someone suggest what to do in this scenario
You Can add ng-patter or add html5 input type number with step attr.
HTML5
<input type="number" name="myDecimal" placeholder="Decimal" ng-model="myDecimal" *step="0.01"* />
ng-pattern
<form name="myForm">
<input type="text" name="test1" data-ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/" data-ng-model="model.amount" />
<span data-ng-show="myForm.test1.$error.pattern">invalid</span>
<span>{{model.amount}}</span><br/>
</form>
Ng-pattern with min and max
<form name="myForm">
<input type="text" name="test1" data-ng-pattern="/^(100(?:\.00)?|0(?:\.\d\d)?|\d?\d(?:\.\d\d)?)$/" data-ng-model="model.amount" />
<span data-ng-show="myForm.test1.$error.pattern">invalid</span>
<span>{{model.amount}}</span><br/>
</form>
Please check working Ex. here
https://plnkr.co/edit/WSqMHsLSCkRk7VVsNfHQ?p=preview
You can use ng-pattern to do this. It will compare the ng-model value with the pattern each time the value changes.
See the docs here
Try referring this:
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<h2>Validation Example</h2>
<form ng-app="myApp" ng-controller="validateCtrl"
name="myForm" novalidate>
<p>Enter Decimal:<br>
<input type="number" name="decimal" ng-model="decimal" required ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/">
<span style="color:red" ng-show="myForm.decimal.$dirty && myForm.decimal.$invalid">
<span ng-show="myForm.decimal.$error.required">please enter decimal value.</span>
<span ng-show="myForm.decimal.$invalid">only two decimal places are allwed.</span>
</p>
<p>
<input type="submit"
ng-disabled="myForm.decimal.$dirty && myForm.decimal.$invalid">
</p>
</form>
View1
#model WebApplication2.Models.TestViewModel
#using (Html.BeginForm("Test", "Home"))
{
<div>Upper form</div>
#Html.EditorForModel()
}
In EditorTemplates i have editor for this view
#model WebApplication2.Models.TestViewModel
#using (Html.BeginForm("Test2", "Home"))
{
<h2>TestViewModel</h2>
}
The actual result is
<form action="/Home/Test" method="post">
<div>Upper form</div>
<div class="editor-label"><label for="Age">Age</label></div>
<div class="editor-field"><input class="text-box single-line" data-val="true" data-val-number="The field Age must be a number." data-val-required="The Age field is required." id="Age" name="Age" type="number" value="0"> <span class="field-validation-valid" data-valmsg-for="Age" data-valmsg-replace="true"></span></div>
<div class="editor-label"><label for="Name">Name</label></div>
<div class="editor-field"><input class="text-box single-line" id="Name" name="Name" type="text" value=""> <span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span></div>
</form>
But the desire result should be
<form action="/Home/Test" method="post">
<div>Upper form</div>
<form action="/Home/Test2" method="post">
<div class="editor-label"><label for="Age">Age</label></div>
<div class="editor-field"><input class="text-box single-line" data-val="true" data-val-number="The field Age must be a number." data-val-required="The Age field is required." id="Age" name="Age" type="number" value="0"> <span class="field-validation-valid" data-valmsg-for="Age" data-valmsg-replace="true"></span></div>
<div class="editor-label"><label for="Name">Name</label></div>
<div class="editor-field"><input class="text-box single-line" id="Name" name="Name" type="text" value=""> <span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span></div>
<form>
</form>
So my question is how can i nested the second BeginForm correctly ?
As other mentioned in the comments,nested forms are not a good idea.
What you should be doing is, Keep the form tag for your outer view as it is. For your model, Use normal html form elements without a form tag and use ajax to post data to the server from your java script and once you receive the data, you should be able to access the DOM elements using jQuery and update values as needed.
Something like this ( The below code won't work with the markup you provided. This is just to give you an idea how to handle it generally);
$(function(){
$(document).on("click","#SomeBtnOnModelDialog",function(e){
//Some submit button on model dialog was clicked
e.preventDefault();
//Read the data from model dialog elements using jquery
// and build an object to send to action method
var dummyDataYouWantToSend = { name : "Read it using jquery",age:12};
$.post("#Url.Action("SomeActionMethod","YourController")", dummyDataYouWantToSend ,
function (res){
//Got some response.
//Now update some DOM elemets from the JSON response came back?
// $("#SomeFormElementId").val(res.SomePropertyName);
});
});
});
I tried to use ASP.NET MVC 3 example of jquery file upload plugin. I've changed upload-template that it shows an input filed and a checkbox for every file (user can set some data for each chosen file). And now when user decides to upload file I need to get not only data provided by plugin (file name, file url, file size) but also data from input and checkbox. But I don't know how to get values when user uploads many files, because if I give an id to these fields there will be the same id for each input and each checkbox, so it's not gonna work. If I give the same class for these fields I can get elements by class and iterate through these fields but I don't know which iteration refers to which file.
I've put hidden inputs in form which is send when file is uploaded but I have no idea how to get data from each input in upload-template to send it via form.
There is a code used to display each file added to queue but not uploaded yet.
<!-- The template to display files available for upload -->
<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
{% var nodeName = file.name.substring(0, file.name.length - 4); %}
<tr class="template-upload fade">
**<td><input id="setNodeName" value="{%=nodeName%}" type="text" class="form-control nodename" /></td>**
{% if (file.error) { %}
<td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>
{% } else if (o.files.valid && !i) { %}
<td>
<div class="progress progress-success progress-striped active"><div class="bar" style="width:0%;"></div></div>
</td>
<td class="start">{% if (!o.options.autoUpload) { %}
<button class="btn btn-primary">
<i class="icon-upload icon-white"></i>
<span>{%=locale.fileupload.start%}</span>
</button>
{% } %}</td>
{% } else { %}
<td colspan="2"></td>
{% } %}
<td class="cancel">{% if (!i) { %}
<button class="btn btn-warning">
<i class="icon-ban-circle icon-white"></i>
<span>{%=locale.fileupload.cancel%}</span>
</button>
{% } %}</td>
</tr>
{% } %}
</script>
Then there is form which is send when file is uploaded. I added here hidden input to store data from user (input filed which has id setNodeName):
<form id="fileupload" action="#Url.Action("UploadFiles")" method="POST" enctype="multipart/form-data">
**<input type="hidden" id="nodename" value="" />**
<!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
<div class="row fileupload-buttonbar">
<div class="span7">
<!-- The fileinput-button span is used to style the file input field as button -->
<span class="btn btn-success fileinput-button">
<i class="icon-plus icon-white"></i>
<span>Add files...</span>
<input type="file" name="files[]" multiple>
</span>
<button type="submit" class="btn btn-primary start">
<i class="icon-upload icon-white"></i>
<span>Start upload</span>
</button>
<button type="reset" class="btn btn-warning cancel">
<i class="icon-ban-circle icon-white"></i>
<span>Cancel upload</span>
</button>
<button type="button" class="btn btn-danger delete">
<i class="icon-trash icon-white"></i>
<span>Delete</span>
</button>
<input type="checkbox" class="toggle">
</div>
<div class="span5">
<!-- The global progress bar -->
<div class="progress progress-success progress-striped active fade">
<div class="bar" style="width:0%;"></div>
</div>
</div>
</div>
<!-- The loading indicator is shown during image processing -->
<div class="fileupload-loading"></div>
<br>
<!-- The table listing the files available for upload/download -->
<table class="table table-striped"><tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery"></tbody></table>
</form>
And in the function called before the file is uploaded I wanted to transfer data from input in upload-template to hidden input in form. And as I said I tried to call it by id but when there is more than one file I have a couple of inputs with the same id so it's not working. I also tried to get elements by class (I changed setnodename id to setnodename class) and I had a couple of inputs with data from user but I didn't know which of these inputs should I use at the moment because files in jquery plugin don't have index value. So for each uploaded file I had an array of inputs (count of inputs was equal to added files count) but I didn't know which of array elements is valid for file which was uploaded at the moment.
I think you should take a look at the documentation of plugin about sending additional parameters with file. What you would need to do is to add event handler on 'fileuploadsubmit' which will fire on every file before it uploads:
$('#fileupload').bind('fileuploadsubmit', function (e, data) {
var inputs = data.context.find(':input');
data.formData = inputs.serializeArray();
})
<form id="form1" runat="server">
<div>
<pre>
UR NAME <input type="text" id="text1" name="name"/>
UR AGE <input type="text" id="text2" name="age"/>
UR Gender <input type="radio" id="Gender" name="Gender" /> Male
<input type="radio" id="Radio1" name="Gender" /> Female
Select UR club
<input type="checkbox" id="chckbox1" runat="server" name="ABC" value="ABC" />ABC
<input type="checkbox" id="chckbox2" runat="server" name="ACC" value="ACC" />ACC
<input type="checkbox" id="chckbox3" runat="server" name="APAC" value="APAC" />APAC
<select id="d" name="select_catalog_query1">
<option>Primary</option>
<option>Secondary</option>
</select>
<input type="submit" id="sub" value="Submit" runat="server" onserverclick="show_Info"/>
</pre>
<div><label id="labl1" runat="server" />
</div>
</div>
</form>
I want to show all the info what I get in a label tag id labl1. here is my aspx.cs page's code.
protected void show_Info(object sender, EventArgs e)
{
string txt1 = "us choosen club";
string txt= "ur name"+" "+"UR age"+" ";
labl1.InnerText = txt+" "+txt1;
labl1.Visible = true;
}
how can I get all the data of text,select tag, checkbox into show_Info function??
I'm not sure why are you not using the asp.net controls instead of using HTML controls with runat="server" attribute. You can use asp.net controls in such cases they make thing a lot more easier for you.
By the way you can use the Value property of html controls.
//for input type text
string textValue = text1.Value;
//for checkbox
string checkBoxValue = chckbox1.Value;
// for select-option
string selectedOption = d.Value;
Those controls are not accessible on your code behind (.cs page), you need to add runat="server" property with them.
You can fetch value from Request.Form[] collection
var name = Request.Form["name"];
var age= Request.Form["age"];