Not to reload a page on button click

Gunjan Manan

10y984.NET

I have a view in mvc and I want that my page should not reload. I tried everything it is reloading again and again. May I know how can I stop it. I am attaching my code.

this is the view

Uniphar Password

@Html.EditorFor(model => model.password1, new { htmlAttributes = new { @class = "form-control", @placeholder = "Enter Uniphar Pharmacy Password", @required = "required" } })

United Drug Account Number

@Html.EditorFor(model => model.accountNumber2, new { htmlAttributes = new { @class = "form-control", @placeholder = "Enter United Drug Pharmacy Account Number" } })

United Drug Password

@Html.EditorFor(model => model.password2, new { htmlAttributes = new { @class = "form-control", @placeholder = "Enter United Drug Pharmacy Password" } })

EuroDrug Account Number

@Html.EditorFor(model => model.accountNumber4, new { htmlAttributes = new { @class = "form-control", @placeholder = "Enter EuroDrug Pharmacy Account Number" } })

When I am clicking

it is reloading the page I want to restrict it. Any suggestions

10 Replies

Know the answer? Post it — somebody with the same question will find it here.

Gunjan Manan10y ago
Actually the id in the form is coming null when we are using this ajax format and when I am removing it it is giving me right id. I don't know why using ajax it is giving null id to whole form.
0
Afzaal Ahmad Zeeshan10y ago
Although this is a very bad coding practice, but you can do the following to get the ID from your HTML,
$.ajax({
//GetthevalueofIDfromtheelement
url:'Accounts/Enable1/'+$(this).attr('id'),
data:{accountNumber1:'accountNumber1'},
success:function(data){
//Datapublished,serverrespondedas"data"
}
})
This would use the ID of the current element (which is the hyperlink) and would send it to the server.
0
Gunjan Manan10y ago
no it is posting but I don't know in my html i provided
On
here id is equal to model.company id
but in
url:'Accounts/Enable1/id'
id is returning null to me rather than company id
0
Afzaal Ahmad Zeeshan10y ago
Would you share the error that comes up? Because it is hard to say what goes wrong.
0
Gunjan Manan10y ago
I did the same but it is not working it is stopping button to reload form but it is not posting data
0
Afzaal Ahmad Zeeshan10y ago
The code is jQuery, not plain JavaScript, so you need to use a wrapper around it,
This code would work now and would attach the event handler to that button of yours. I would recommend learning a bit more on,https://api.jquery.com/category/events/.
0
Gunjan Manan10y ago
Hi I am not sure I did in this way. Canyou tell me is it correct?
0
Afzaal Ahmad Zeeshan10y ago
Write the code to save the data after this line of event.preventDefault();.The rest of the code will be executed and the data will be saved, but the page won't reload. If you wanted to use the Ajax, for example, you will do the following trick,
functionpublishData(){
event.preventDefault();
//Publishthecontent
$.ajax({
url:'where/to/post.aspx',
data:{data:object},
success:function(data){
//Datapublished,serverrespondedas"data"
}
});
}
This way, you will be able to publish the data and at the same time prevent the page from reloading.
0
Gunjan Manan10y ago
Hi I can stop the action with it but I want data to be posted also after this button click
0
Afzaal Ahmad Zeeshan10y ago
There are many methods to use, in JavaScript you can write the following code as the click handler,
$('#btnId').click(function(){
event.preventDefault();
});
This will remove the page refresh from your page. Otherwise, you can remove the button from the form which causes it to load the page also POST-ing the data to the servers. Also, the code above is jQuery, for JavaScript code use this,
functionpreventReload(){
event.preventDefault();
}
Then finally, attach this code to the HTML of your web application, like this,
"preventReload()">MyButton
I didn't use your code of HTML, instead just gave an example of using this in your own application's HTML source code.
0