Develop Reference

Ajax call goes only one time ASP.Net MVC5

I am writing an AJAX function in ASP.Net MVC5 and I am getting a problem that the form AJAX request goes only one time. It is a search page. After I choose the filter I press search I get the correct result. However if I changed the filter and click the search submit again, nothing will happen.
var ajaxFormSubmit = function() {
var $form = $(this);
var options = {
url: $form.attr("action"),
type: $form.attr("method"),
data: $form.serialize()
};
$.ajax(options).done(function (data) {
var target = $($form.attr("data-enbw-target"));
target.replaceWith(data);
debugger;
});
return false;
};
$("form[data-enbw-ajax='true']").submit(ajaxFormSubmit);
<form method="get" id="documentForm" action="#Url.Action("Index", "DocumentSearch")" def data-enbw-ajax="true" data-enbw-target="#documentSearchResult">
<button type="submit" id="submitbtn" name="submitbtn" tabindex="100" class="k-button">
<img src="~/Content/search_small_icon.png" />
#WebResources.DocumentSearchButton
</button>
</form>
#Html.Partial("Results", #Model)
public ActionResult Index(DocumentSearchInput model)
{
if (Request.IsAjaxRequest())
{
return PartialView("Results", result);
}
return View(result);
}
I do not get any error. and when I get a debugger; in javascript. the new data is correct. can you please help me.

You are replacing the form in your ajax success. As such, the new form will not have the submit binding on it. If you truely want to do this you will have to rebind to the new form, or possibly use a delegate instead.
$('parentSelector').on('event', 'childSelector', function(){});
parentSelector - A parent element of the child that pre-exists the child element and should typically not be removed/created during the page lifespan.
childSelector - A selector for the element that will be created/changed/removed at some point in the lifespan of the page.

I found the answer.
the problem wasn't with the submit. the problem was with re-writing the data.
$.ajax(options).done(function (data) {
$("#documentSearchResult").empty();
$("#documentSearchResult").html(data);
});
simply, I empty the div then write inside.

MVC Ajax.BeginForm JavaScript parameters

I have an AJAX form where the url id needs to be from JavaScript
#using(Ajax.BeginForm("Add","Comments", new { ArticleID = 3 }, new AjaxOptions { UpdateTargetId="Comments"}))
Where ArticleID = 3 should be replaced so that the ArticleID value is set equal to the result of a called Javascript function. Something like
JS:
function GetArticleID()
{
return 3;
}
Razor:
#using(Ajax.BeginForm("Add","Comments", new { ArticleID = GetArticleID() }, new AjaxOptions { UpdateTargetId="Comments"}))
Controller:
public ActionResult Add(int ArticleID, Comment model)
{
}
How can I use JavaScript function result as BeginForm parameter?

The line #using(Ajax.BeginForm(" will be executed by razor on server. At that time it does not have any knowledge of the javascript methods in your client browser. So you cannot mix a javascript function there.
I prefer to write clean custom code to do the ajax form submit (instead of using Ajax.BeginForm) because it allows me to customize any way i want.
Keep your form as a normal form.
#using(Html.BeginForm("Add","Comments"))
{
<input type="hidden" name="ArticleId" id="ArticleId" value=""/>
<input name="CommentText" type="text" />
<input type="submit" id="saveCmntBtn" />
}
Now listen to the click event of the submit button. Assign the ArticleId value to the input field, get the serialized version of the form and post to server. You may use jQuery serialize() method to get the serialized version of your form.
$(function(){
$("#saveCmntBtn").click(function(e){
e.preventDefault();
$("#ArticleId").val(GetArticleID());
var f=$(this).closest("form");
$.post(f.attr("action"),f.serialize(),function(res){
$("#Comments").append(res);
});
});
});

Sending request with angular - empty elements in request

I'm sending POST request with angular with submitted form.
I have optionals input fields and when I type something there and delete it then in my request I have this field containing "".
Is that how it should be?
Thats how my form look:
<label class="col-md-2 col-xs-2 my-label" for="contactFirstName">Imię</label>
<div class="col-md-3 col-xs-3">
<input type="text" class="form-control" id="contactFirstName" name="contactFirstName"
placeholder="Imię"
ng-model="loan.newLoan.contactPerson.firstName" >
</div>
And thats how I'm sending the request:
function create() {
return RequestFactory.save({id1:'loans', id2:'create'},vm.newLoan,
function () {
MessageFactory.setSuccess({show:true, msg:'success'});
$state.reload('loan.new');
}, function(response){
vm.isError = true;
ErrorFactory.errorHandler(vm.errorMessages, response);
});
}
And when sending, in my request json with this field looks like this:
{"firstName":""}
Is that ok? Or there should't be this field in the request if its empty?
What should I do with this?

Is that ok?
Yes or not, depends of what your backend service is expecting.
You can remove the empty fields in Angular by doing something like
function create() {
var data = {};
if (vm.newLoan.contactPerson.firstName) {
data.firstName = vm.newLoan.contactPerson.firstName;
}
RequestFactory.save({ id1: 'loans', id2: 'create' }, data, ...);
}
And you should do a supplementary check in your backend service to remove the empty fields if you don't want to save it. Never trust the data sent from a client, even if you validate the data in JavaScript. Always do an extra check in the server code.

Hence your html input field is not required, it is perfectly fine.Hope your backed service also an optional field.If it's a required field then you have to check as shown below when you press the Save button.
This is just an example:
Html
<button type="submit" class="btn btn-primary blue" ng-
click="vm.save(yourFormName.$valid)"> Save</button>
JS
//to save
vm.save = function (isValid) {
if (isValid) {
//fires save method here
}
};

JQuery in MVC - Send form data as array with getJson

I have an MVC view which updates the elements on the page by using getJSON pointing at a method in my controller periodically and parsing the returned Json.
Method blueprint in controller:
public JsonResult GetAttendeeJson()
{
//Code which creates the Json I need.
return Json(result, JsonRequestBehavior.AllowGet);
}
Call from View:
function showDetects() {
// This is the main AJAX that retrieves the data.
$.getJSON('/Attendee/CardDetections', function (data) {
$.each(data, function (i, country) {
// perform actions using data.
});
});
}
It's not important to understand what I'm doing but my circumstances have changed and I have now added to my view a form containing a variable amount of checkboxes (depending on which user uses the page the number of checkboxes will be different).
Checkbox form creation:
<form onsubmit="#Url.Action("Index", "Attendee")" method="post" id="checkboxform">
#{int i = 0;}
#{foreach (string s in ViewBag.LocationNames)
{
<div class="radio-inline">
#s
<input class="checkboxcontrol" onchange="this.form.submit()" type="checkbox" id="CheckBoxes" name="CheckBoxes" value="#ViewBag.LocationIds[i]">
</div>
i++;
}
}
</form>
The addition of this form means I now require my controller method which returns the Json to be able to use the data of these checkboxes. The GetAttendeeJson now needs to know which checkboxes are currently checked on the form.
So I want the method blueprint to be like:
public JsonResult GetAttendeeJson(int[] checkBoxValues)
{
//Code which creates the Json I need using the checkbox values.
return Json(result, JsonRequestBehavior.AllowGet);
}
Is it possible to do this without submitting the form? I use the submit to do something else which leads to reloading the page. I use the getJson to just update page content.
Ideally I'd just like to get the Value field of the checked checkboxes in an array and send it to the GetAttendeeJson function as a parameter when calling it.
Thanks,
JK

Lets say you have following HTML -
<input type="checkbox" name="chk" value="1" /> 1
<input type="checkbox" name="chk" value="2" /> 2
<input type="checkbox" name="chk" value="3" /> 3
<input type="checkbox" name="chk" value="4" /> 4
<input type="button" id="submit" value="Submit"/>
Then we can push the checked checkboxes to an action method using AJAX POST as shown below -
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script>
$(function () {
$("#submit").click(function () {
var vals = [];
$('input:checkbox[name=chk]:checked').each(function () {
vals.push($(this).val());
});
$.ajax({
url: "/Home/GetAttendeeJson",
type: "post",
dataType: "json",
data: JSON.stringify({ checkBoxValues: vals }),
contentType: 'application/json; charset=utf-8',
success: function (result) {
if (result.success) {
}
else {
}
}
});
});
});
</script>
When we click on the button, the checked checkboxes can be obtained in following controller action -
public JsonResult GetAttendeeJson(int[] checkBoxValues)
{
//Code which creates the Json I need using the checkbox values.
return Json("true", JsonRequestBehavior.AllowGet)
}
View renders as follows where we can check/uncheck the checkboxes -
Then when you put a breakpoint and debug the code, output would be as shown below -

Try triggering ajax call periodically. So that without submitting form you can send it to your function.

How to pass a value to razor variable from javascript variable?

How to pass a value to razor variable from javascript variable, is it possible asp.net mvc razor view engine?
#{
int a = 0;
}
<script>
var b = ...
#a = b;
</script>

You can't. and the reason is that they do not "live" in the same time.
The Razor variables are "Server side variables" and they don't exist anymore after the page was sent to the "Client side".
When the server get a request for a view, it creates the view with only HTML, CSS and Javascript code. No C# code is left, it's all get "translated" to the client side languages.
The Javascript code DOES exist when the view is still on the server, but it's meaningless and will be executed by the browser only (Client side again).
This is why you can use Razor variables to change the HTML and Javascript but not vice versa. Try to look at your page source code (CTRL+U in most browsers), there will be no sign of C# code there.
In short:
The server gets a request.
The server creates or "takes" the view, then computes and translates all the C# code that was embedded in the view to CSS, Javascript, and HTML.
The server returns the client side version of the view to the browser as a response to the request. (there is no C# at this point anymore)
the browser renders the page and executes all the Javascript

But it would be possible if one were used in place of the variable in #html.Hidden field.
As in this example.
#Html.Hidden("myVar", 0);
set the field per script:
<script>
function setMyValue(value) {
$('#myVar').val(value);
}
</script>
I hope I can at least offer no small Workaround.

Okay, so this question is old... but I wanted to do something similar and I found a solution that works for me. Maybe it might help someone else.
I have a List<QuestionType> that I fill a drop down with. I want to put that selection into the QuestionType property on the Question object that I'm creating in the form. I'm using Knockout.js for the select binding. This sets the self.QuestionType knockout observable property to a QuestionType object when the user selects one.
<select class="form-control form-control-sm"
data-bind="options: QuestionTypes, optionsText: 'QuestionTypeText', value: QuestionType, optionsCaption: 'Choose...'">
</select>
I have a hidden field that will hold this object:
#Html.Hidden("NewQuestion.QuestionTypeJson", Model.NewQuestion.QuestionTypeJson)
In the subscription for the observable, I set the hidden field to a JSON.stringify-ed version of the object.
self.QuestionType.subscribe(function(newValue) {
if (newValue !== null && newValue !== undefined) {
document.getElementById('NewQuestion_QuestionTypeJson').value = JSON.stringify(newValue);
}
});
In the Question object, I have a field called QuestionTypeJson that is filled when the user selects a question type. I use this field to get the QuestionType in the Question object like this:
public string QuestionTypeJson { get; set; }
private QuestionType _questionType = new QuestionType();
public QuestionType QuestionType
{
get => string.IsNullOrEmpty(QuestionTypeJson) ? _questionType : JsonConvert.DeserializeObject<QuestionType>(QuestionTypeJson);
set => _questionType = value;
}
So if the QuestionTypeJson field contains something, it will deserialize that and use it for QuestionType, otherwise it'll just use what is in the backing field.
I have essentially 'passed' a JavaScript object to my model without using Razor or an Ajax call. You can probably do something similar to this without using Knockout.js, but that's what I'm using so...

I see that this problem was discussed some time ago, but if anyone 'll meet with this again, here is my solution:
In your *.cshtml View file:
<script>
var data = JsFunction("#Html.Raw(Model.Path)");
$(function () {
$("#btn").click(function () {
var model = { Id: '#Html.Raw(Model.Id)', Data: data }
$.ajax({
type: "POST",
url: "/Controller/Action",
data: model,
datatype: "html",
success: function() {
console.log('Success');
}
});
});
});
</script>
JavaScript variable model is something that I need to pass to Razor ViewModel.
It can be done with ajax request.
You just need to have proper argument/s in your action, that matches Json object created in JavaScript.
Hope it'll help someone!

Step: 1 Your Html,
First Store the value in your localstorage using javascript then add the line like below ,this is where you going to display the value in your html, my example is based on boostrap :
<label for="stringName" class="cols-sm-2 control-
label">#Html.Hidden("stringName", "")</label>
Step:2 Javascript
$('#stringName').replaceWith(localStorage.getItem("itemName"));

here is my solution that works:
in my form i use:
#using (Html.BeginForm("RegisterOrder", "Account", FormMethod.Post, new { #class = "form", role = "form" }))
{
#Html.TextBoxFor(m => m.Email, new { #class = "form-control" })
#Html.HiddenFor(m => m.quantity, new { id = "quantity", Value = 0 })
}
in my file.js I get the quantity from a GET request and pass the variable as follows to the form:
$http({
method: 'Get',
url: "https://xxxxxxx.azurewebsites.net/api/quantity/" + usr
})
.success(function (data){
setQuantity(data.number);
function setQuantity(number) {
$('#quantity').val(number);
}
});

Yes You Can
Asp.net MVC razor
I have 2 Input
<input id="TXTCount" type="number" readonly="readonly" class="form-control text-center text-bold" step="1" min="0" max="10000" value="1" inputmode="numeric" />
<input id="TXTTOTal" type="number" readonly="readonly" class="form-control text-center text-bold" step="1" min="0" max="10000" value="1" inputmode="numeric" />
C# In view
#{string WatsMSG = "xxx";}
And WhatsApp Link
<a class="btn btn-success" id="WatsSendApi" href="https://api.whatsapp.com/send?phone=0000&text=#WatsMSG">
<b class="text-black" style="font-size:small"> whatsapp </b><i class="fa fa-whatsapp" style="color:white"></i> </a>
And In jQuery
<script>
$("#WatsSendApi").click(function () {
var StringMSG;
StringMSG=("Ineed : ");
StringMSG += (" Item Name : ");
StringMSG +='#item.ITName' ;
StringMSG += (" Count: ");
StringMSG += $('#TXTCount').val();
StringMSG += (" Price: ");
StringMSG += '#item.ITPrice';
StringMSG += (" Total: ");
StringMSG += $('#TXTTOTal').val();
alert(StringMSG);
this.href = this.href.replace("xxx", StringMSG);
});
</script>
I am passing script value And Model value to C# string

Razor View Server Side variable can be read to Client Side JavaScript using #
While
and JavaScript client side variable can read to Razor View using #: