Pass parameters from C# into Jquery - c#

How do you pass a parameter from C# into the value part of instead of hard coding it with different values.
<div class="property-container">
<input class="progress-value" type="hidden" value="17" />
<div class="property-title">Test</div>
<div class="property-progress"></div>
</div>
<div class="property-container">
<input class="progress-value" type="hidden" value="32" />
<div class="property-title">Test 2</div>
<div class="property-progress"></div>
</div>
<div class="property-container">
<input class="progress-value" type="hidden" value="24" />
<div class="property-title">Test 3</div>
<div class="property-progress"></div>
</div>
<script type="text/javascript" >/
$(function () {
// loop through each 'container'
$(".property-container").each(function () {
// get the value that was rendered from the model
var progress = parseInt($(this).children(".progress-value").val());
// create the progress bar with the value
$(this).children(".property-progress").progressbar({ value: progress });
});
});
</script>

From your comments
<input class="progress-value" type="hidden" value="17" id="Test" />
In c# I tried, Test.Value = "20";
You should have a runat="server" if you want to access the hidden field in your codebehind.
<input class="progress-value" runat="server" type="hidden" value="17" id="Test" />
//& then in C# set it like this..
Test.Value = "20";
In jQuery, get the value of the hidden field
$('.progress-value').val()

You can use this :
$(this).children(".property-progress").progressbar({ value: '<%= MyValue() %>'});
And in the c# create a property:
Public string MyValue
{
get;set;
}
Nb
If you intend to update the progressbar according to server activity - i'd suggest you to google signalR.

You just have to remember where the variables are set, and where the code is run. C# runs on the server, so you can't set javascript properties directly, rather, you need to set up your HTML template so that when it is interpolated by the server the correct values are sent to the client.
In other words, you won't be able to set the progress bar width on the server, b/c the server will only be able to set the initial value of the progress bar. It will be up to the client to increment the value. Otherwise, you'd need to constantly be posting the page back to the server, which isn't what you want at all.
The easiest way to get the progress data from the server to the client is by setting up a web service that returns JSON, and calling it using jquery.
Here are some resources on how to do that:
Create and Call a Simple Web Service in ASP.NET
Understanding ASP.NET AJAX Web Services
ASP.net progress bar updated via jQuery ajax during async operation
You should be able to decorate a method on your asp.net class with [WebMethod] to make it callable via jQuery.

It really depends on what technology you're using to output code. If you're using Razor, it would be:
<input value="#ObjectName.Value">

Related

How can I retrieve Textbox data in ASPNET MVC from a rich text editor box formatted by CKEditor?

What I am trying to achieve is to retrieve the data of text box which has been formatted by the CKEditor that makes it a rich text code editor.
I've tried all of the traditional form retrieval methods but none of them works.
This is the form I am trying to get the data from:
<div id="editorDiv" style="display:none; padding-bottom:25px">
<form method="post" >
<input runat="server" id="textBox" TextMode="Multiline" name="textBox">
<script>
CKEDITOR.replace("textBox");
</script>
<input class="btn btn-success" type="submit" runat="server" name="commentSubmit">
</form>
</div>
I found the solution.
The problem was that ASP has a validation method that checks data that is input.
To get data from the just like any other POST request you have to add [System.Web.Mvc.ValidateInput(false)] before the action that handles the POST.

How to save data from summernote into SQL DB

how are you guys?
i have asp.net webform its for adding news in the news content i would like to use summernote http://summernote.org/ Super Simple WYSIWYG editor. as a WYSIWYG editor so could some one please help me to save the data from this editor
this is my code
<div class="form-body">
<div class="form-group last">
<label class="control-label col-md-2">News Content</label>
<div class="col-md-10">
<div name="summernote" id="summernote_1"> </div>
<asp:label runat="server" text="Label" ID="news_con" ></asp:label>
</div>
</div>
</div>
i can't get the text value from the summernote
by this code
news_con.Text = Request.Form["summernote_1"];
Have you considered using a <textarea> to handle this as opposed to a <div>? Usually they are a bit easier to use with respect to storing values (as they are designed to do so) :
<textarea id="txtTest" runat="server"></textarea>
One of the ways that you might handle this would be to register an event using Summernote's available API to set the HTML content for your <textarea> element whenever focus was lost (e.g. the onblur) :
<script>
$(function () {
// Set up your summernote instance
$("#txtTest").summernote();
// When the summernote instance loses focus, update the content of your <textarea>
$("#txtTest").on('summernote.blur', function () {
$('#txtTest').html($('#txtTest').summernote('code'));
});
});
</script>
Since you are likely going to be storing HTML content within the element, you'll likely want to ensure that .NET doesn't think you are trying to exploit it. You can do this by either explicitly setting this page to ignore that process by updating the ValidateRequest property of your page :
<%# Page ... ValidateRequest = "false" %>
Or you could try simply escaping the content that is being set :
$('#txtTest').html(escape($('#txtTest').summernote('code')));

Get input value on server side

I'm having some trouble and not sure what's going on.
I have a form with input value and want to be able to get that input value and send it back to my controller (server side).
My html code
<form action="/Home/Search" method="get">
<button class="search-btn-widget"></button>
<input class="search-field" id="sub" type="text" onblur="if(this.value=='')this.value='Search';" onfocus="if(this.value=='Search')this.value='';" value="Search" />
</form>
Then in my controller I have
string sub = Request["sub"];
However it ends up being null and not sure what's going on. Any ideas?
Just to make it work: add the name attribute
<input class="search-field" id="sub" name="sub" ...
but check this.
You need to add the name attribute to the input tag.
If you pull up the developer console and take a look at the HTTP GET request that is being sent, you will see that no query string is being associated with the request. This will let you know that the issue on the HTML side and not the ASP.Net MVC side.
Update input tag:
<input class="search-field" id="sub" name="sub" type="text" onblur="if(this.value=='')this.value='Search';" onfocus="if(this.value=='Search')this.value='';" value="Search" />
Update Controller Action to:
public ActionResult Search(string sub)
1) If you wanna see your input into the Request you must send your Form as POST:
<form action="/Home/Search" method="POST">
2) Make sure that input has a name:
<input class="search-field" id="sub" name="name"
type="text"
onblur="if(this.value=='')this.value='Search';"
onfocus="if(this.value=='Search')this.value='';"
value="Search" />
Then you will be able so see It in the request
You should add the name attribute to the input element.

How do I send the results of a javascript method (JSON object) to the code-behind on asp.net webform?

I have a piece of javascript that processes some of my form data and the result needs to be submitted to my code-behind so I can map it to an objects and save to a database:
Here is the form:
<form method="POST" id="paymentForm">
<span class="payment-errors" runat="server"></span>
<div>
<label>
<span>Card Number</span>
<br />
<input type="text" size="20" data-stripe="number" runat="server" placeholder="1111222233334444" />
</label>
</div>
<div>
<label>
<span>CVC</span>
<br />
<input type="text" size="4" data-stripe="cvc" runat="server" placeholder="123"/>
</label>
</div>
<div>
<label>
<span>Expiration (MM/YYYY)</span>
<br />
<input type="text" size="2" data-stripe="exp-month" runat="server" placeholder="01"/>
</label>
<br />
<input type="text" size="4" data-stripe="exp-year" runat="server" placeholder="2020"/>
</div>
<button type="submit">Submit Payment</button>
</form>
Here it the js bits:
<script type="text/javascript">
// This identifies your website in the createToken call below
// You need to put your real publish key here.
Stripe.setPublishableKey('pk_test_1nDJ3hA1Mv2Sy9bUoYcBMXmm');
// ...
// I am using jquery to process the payment. It knows what form to
// process it on based on the name 'payment-form'
jQuery(function ($) {
//payment submission
$('#ctl01').submit(function (event) {
alert('In .submit()');
var $form = $(this);
// Disable the submit button to prevent repeated clicks
$form.find('button').prop('disabled', true);
Stripe.createToken($form, stripeResponseHandler);
// Prevent the form from submitting with the default action
return false;
});
//if there is a error, it is displayed on the page if there was
//no error this is where it gets sent to the server.
var stripeResponseHandler = function (status, response) {
var $form = $('#ctl01');
if (response.error) {
// Show the errors on the form
$form.find('.payment-errors').text(response.error.message);
$form.find('button').prop('disabled', false);
} else {
// token contains id, last4, and card type
var token = response.id;
// Insert the token into the form so it gets submitted to the server
$form.append($('<input type="hidden" name="stripeToken" />').val(token));
// and submit
$form.get(0).submit();
}
};
});
</script>
So the js creates a Stripe token, but I don't know how to get this to hit my code-behind when I hit submit. The page just flashes and nothing is there.
I tried to make the button an asp.net button with an event tied to it, no good.
Should I do something in Page_Load() that will be able to have this data in the POST to the page?
I see two immediate options, depending upon what you want to do in the server-side code:
Manually invoke __doPostBack JavaScript function to cause a server-side postback. I would recommend this approach if you want to interact with the ASP.NET server controls on the page.
Here is another StackOverflow question that details how to send Multiple parameters in __doPostBack.
Call an ASP.NET AJAX Page Method, which is essentially a stand-alone web service hosted inside of an ASP.NET page. I would recommend this approach if you just want to invoke some server-side logic (i.e. save or retrieve data from the database), but do not not need an instance of the page itself, as this is an asynchronous operation and none of the page controls will be available. This is great for just sending data to the server and getting data back that jQuery can handle.
Here is how to use jQuery to directly call ASP.NET AJAX page methods.

Getting data from an Input control in to code behind

I am using asp.net C#
I am also using the jQuery UI Calendar control.
calendar control
It appears the calendar control wants to work with an input control with an ID of "datepicker".
<input type="text" id="datepicker" />
I want to use value of the input control in my code behind but seeing how it is not an asp.net control I am not sure how I can reference it in the code behind.
Does anyone know how to get the value of the input control in the code behind?
use
<input type="text" id="datepicker" name="datepicker" />
and in the code behind:
Request.Form["datepicker"]
In fact, Form property of Request is populated with form values.
Here you have to mention your form name which contains input tag
<input name="txtemail" id="txtemail" runat="server" type="text" class="cssspa" form="form"/>
in C#
string email = txtemail.Value.ToString();
now u can get data from textbox
If you want to use basic form pulling, you need to add a name attribute:
<input type="text" id="datepicker" name="datepicker" />
if(Page.IsPostBack)
{
string value = Request.Form["datepicker"];
}
Alternatively, you can mark is as an HtmlInputControl
<input type="text" id="datepicker" runat="server" />
System.Web.UI.HtmlControls.HtmlInputControl datepickerControl = this.FindControl("datepicker") as System.Web.UI.HtmlControls.HtmlInputControl;
if(datepickerControl != null)
string value = datepickerControl.Value;
You can access the value via the Request object like onof wrote, or you can turn every html tag into a server control by adding the attribute runat:
<input type="text" id="datepicker" runat="server" ClientIdMode="static" />
The attribute ClientIdMode="static" ensures that the tags ID is not changed by the ASP.NET runtime.
Then you can access the input by the autogenerated member datePicker.
Since you explicitly say code-behind, I assume you probably want to stay with the WebForms/Controls model? With clientidmode you can do that while also having a determinite id value for the calendar.
<asp:TextBox id="datepicker" ClientIDMode="Static" runat="server" />
Then you can interact directly with the control from the code-behind as normal.
But, the calendar control does not require a specific ID. You can initialize it with whatever ID you want
<asp:TextBox id="DateTextBox" runat="server" />
<script>
$(function() {
$( "#<%=DateTextBox.ClientID%>" ).datepicker();
});
</script>

Categories