I am trying to auto post the inputs in my beginform, but their values do not reach the model or controller. They remain null (break points never hit.) What could be causing this?
#model project.Models.data
JAVASCRIPT
function send()
{
$.ajax({
type: 'POST',
url: this.action,
data: {'data1': $('#data1').val(),
'data2': $('#data2').val() },
success: function (done) {
$('#box').html(done.output);
});
}
FORM
#using (Html.BeginForm())
{
<input id="data1" value="0" name="data1" onclick="send();" >
<input id="data2" value="0" name="data2" onclick="send();" >
}
MODEL
namespace projects.Models
{
public class data
{
public int data1{ get; set; }
public int data2 { get; set; }
}
}
You don't seem to be canceling the default event of the form. I would recommend you subscribing to the .submit event of the form and stop mixing markup and javascript:
#using (Html.BeginForm())
{
<input id="data1" value="0" name="data1" />
<input id="data2" value="0" name="data2" />
}
and then in a separate javascript file you could subscribe to the .submit event of this form:
$(function() {
$('form').submit(function() {
$.ajax({
type: this.method,
url: this.action,
data: {
data1: $('#data1').val(),
data2: $('#data2').val()
},
success: function (done) {
$('#box').html(done.output);
}
});
// It is very important to return false in order to prevent the default action
return false;
});
});
For starters, I would recommend not using the onclick attribute. Using jQuery's click or on is much better.
Secondly, the Html.BeginForm() does not work the way in which you are using it. If you want to hit the controller method you need to have a submit button with the value of the controller method you are trying to hit.
If you are trying to hit a method asynchronously with jQuery (using AJAX that is), then I recommend looking at this post here:
Send data with jquery to an MVC controller
To POST to the server you don't need the Html.BeginForm(), if you are using AJAX. However, if you want to POST and Redirect to another action, I would use the Html.BeginForm().
Now if you are trying to POST to the server without using AJAX, then you need that submit button in your Html.BeginForm(). This article below details how a Register Form works and could apply to your situation.
How does the MVC3 Controller retrieve HTTPPOST params?
Related
I have a create,edit,delete application On my Index view i have Button for Edit. by clicking this button it should open pop up in which all data should be displayed for editing.
To achieve this i passed ID of that row which is getting Edited. see code below :
<td>
<button type="button" onclick="EditPopup(#item.Id)">Edit</button>
</td>
here i am passing ID to my EditPopup javascript method. see the method below :
<script type="text/javascript">
$(document).ready(function () {
$("#EditDialog").dialog({
autoOpen: false,
title: 'Title',
width: 'auto',
height: 'auto',
modal: true
});
});
function EditPopup(Get_Id) {
alert(Get_Id) // I am getting correct ID here.
$.ajax({
method: "POST",
url: '#Url.Action("Edit","Home")',
dataType: 'json',
cache: false,
data:{Get_Id}, // tried : {id:Get_Id} , {id:"Get_Id"} not working
success: function (data) {
$('#EditDialog').html(data);
}
});
$("#EditDialog").dialog("open");
}</script>
I am sending value of ID to my Controller method Edit thats why i am using Post method in ajax call. Edit is name of method and Home is name of controller.
HomeController Edit methods
[HttpPost]
public JsonResult Edit(int? id)
{
FloorFactor floorFactor = db.FloorFactors.Find(id);
return Json(floorFactor, JsonRequestBehavior.AllowGet);
}
// POST:
[HttpPost]
public ActionResult Edit(int id, FormCollection collection)
{
FloorFactor floorFactor = db.FloorFactors.Find(id);
return View(floorFactor);
}
in few examples i saw that in ajax call they usually use json result method. so that is the reason i also used json result method.
finally Code which is in my index view where i will show pop up result.
<div id="EditDialog" style="display:none;">
<label> Floor Factor </label>
<br />
<label> Effective From :</label>
So the Whole scenario is :
I send id value on button click event to javascript.
on javascript i make a call to my controller method to get data.
those should pass in EditDialog box of div.
on div block it should display in pop up.
Current output :
I also want to understand how url field works in ajax call.
if i am getting multiple column results as output of that url how can i collect all output in Data part of ajax call.
please also explain on success what parameters i can pass in function.
Thank you for explanation and help.
Edit : It shows no error on console tab.
as shown in this script tab i think it is sending a request as it generates request Id.
Try the below changes
Action Code :
[HttpPost]
public JsonResult Edit(int? id)
{
FloorFactor floorFactor = db.FloorFactors.Find(id);
return Json(floorFactor, JsonRequestBehavior.AllowGet);
}
View Changes
<div id="EditDialog" style="display:none;">
<label> Floor Factor </label> <span id="floorFactor"></span>
<br />
<label> Effective From :</label> <span id="effectiveFrom"></span>
Success method changes
if(data)
{
// GET VALUES
var floorFactor = data.Property_Having_FloorFactor;
var effectiveFrom = data.Property_Having_EffectiveFrom;
// ASSIGN VALUES
$('#floorFactor').text(floorFactor);
$('#effectiveFrom ').text(effectiveFrom );
// OPEN DIALOG
$("#EditDialog").dialog("open");
}
Hope it will work for you.
Change the Controller as
[HttpGet]
public JsonResult Edit(int? id)
{
FloorFactor floorFactor = db.FloorFactors.Find(id);
return Json(floorFactor, JsonRequestBehavior.AllowGet);
}
// POST:
[HttpPost]
public ActionResult Edit(int id, FormCollection collection)
{
FloorFactor floorFactor = db.FloorFactors.Find(id);
return View(floorFactor);
}
Change the 'ajax' as
$.ajax({
method: "GET",
url: '#Url.Action("Edit","Home")',
dataType: 'json',
cache: false,
data: {id:Get_Id},
success: function (data) {
$('#EditDialog').html(data);
}
});
Note: Code is untested. It should have work for you.
Is it possible to automatically bind ASP.NET controllers model with an ajax request that submits data as FormData.
in my provided example I'm required to use HttpContext.Current.Request.Form["property_name"]
to receive data because if I provide a model that is identical to the submitted form data, all values are equal to null;
or does ASP.NET model binding only work on JSON requests ?
Simple code bellow:
View:
#using (Html.BeginForm("Post", "Test", FormMethod.Post, new { #class="test-form"}))
{
<input type="text" name="firstName"/>
<input type="text" name="lastName"/>
<button type="submit">Submit</button>
}
Scripts:
<script>
$('.test-form').on('submit', function (e) {
e.preventDefault();
var formData = new FormData(this);
$.ajax({
url: "#Url.Action("TestPost", "Test")",
method: "POST",
data: formData,
processData: false,
success: function(e){
}
});
});
</script>
Controller:
[HttpPost]
public ActionResult TestPost()
{
var firstname = HttpContext.Current.Request.Form["firstName"];
var lastName = HttpContext.Current.Request.Form["lastName"];
return PartialView("TestPost");
}
Does Not Work Controller:
public class User
{
public string firstName { get; set; }
public string lastName { get; set; }
}
[HttpPost]
public ActionResult TestPost(User model) //model values are null
{
return PartialView("TestPost");
}
When you use a FormData object with ajax the data is sent as multipart/form-data and the content type header is set automatically for you with the correct boundary.
You can override the content type and set tit to whatever you want, which is what happens here.
You might be thinking well I didn't do it, well you good friend jQuery did it for you. It set the default content type for $.ajax for you (application/x-www-form-urlencoded) which pretty much craps up the request.
To stop this action i.e. to stop jQuery from setting a content type header you have to set the contentType parameter to false.
I have a jsp page which displays the details of a student .Based on the student selection from the dropdown box on change event will be fired and retrieve the min and max marks for the student.
<form name="listBean">
<c:forEach var="Item" items="${listBean.nameList}" varStatus="status">
<input type="number"name="nameList<c:outvalue='[${status.index}]'/>.initialMarks"/>
<input type="number" name="nameList<c:out value='[${status.index}]'/>.finalMarks"/>
<input type="submit" value="submit" id="submit" />
MinMarks:<c:out value="${Item.minMarks}"/></c:if>
MaxMarks:<c:out value="${Item.maxMarks}"/></c:if>
</c:forEach>
</form>
After retrieval ,updated data will be stored into the bean.Server request is handled using jquery.ajax() method
function onChange() {
jQuery('form').each(function() {
jQuery.ajax({
url: "http://localhost:9001/submitStudent.do?requestType=auto",
data: $('form').serialize(),
type: 'POST'
});
location.reload();
});
}
Once the server response is successful , i will be reloading the page so that the page will be refreshed with the bean data set during the ajax call.
But it is not displaying the data?What i am doing wrong ?
Or is there any better solution to achieve this?
Any suggestions are welcome .
Thanks
It looks like you are reloading the page immediately after sending the AJAX request, potentially before the server has received and processed it.
You could store your ajax requests in an array and only reload the page when all requests have completed using jquery's when().
function onChange() {
var requests = [];
jQuery('form').each(function() {
requests.push(jQuery.ajax({
url: "http://localhost:9001/submitStudent.do?requestType=auto",
data: $('form').serialize(),
type: 'POST'
}));
});
jQuery.when.apply(jQuery, requests).then(location.reload, errHandler);
}
function errHandler (err) {
// handle any errors
}
I am pretty new to front end development and also the project I’m working on (bug fixes). I am using Knockout/MVC ActionResults.
I have been tasked to alter a form so that it doesn't allow double click submission, I added basic Jquery to disable to button, but have been told it needs to use asyncCommand.
What I have noted about it however is that all examples using this they return a Json result etc. where mine will be an action result.
I was wondering if I need to alter the MVC actionresult or whether there is another way that I’m just not seeing.
I was hoping I could do something like:
HTML
<button class="btn btn-action" data-bind="command: create, activity: create.isExecuting">Create</button>
JS
model.create = ko.asyncCommand({
execute: function (complete) {
$.ajax({
type: 'POST',
url: "/account/create",
data: ko.toJSON(data),
contentType: 'application/json; charset=utf-8',
});
complete();
},
canExecute: function (isExecuting) {
return !isExecuting;
}
});
CONTROLLER
public ActionResult Create(Model model, int versionId)
{
if (success)
{
return Redirect("/accounts");
}
else
{
return View(model);
}
}
Can this actually happen or not?
Thanks,
Clare
The solution for me was to alter the ActionResult to return a value to AJAX.
I have a simple create form in MVC 4 and would like two submit functions: (1) Create and (2) Create & Print. Create is a normal Create action and works perfectly. Create & Print should save the object and then launch a popup browser window with data from the newly saved object. The original window needs to refresh to a blank Create form ready for another record.
What is the best way to approach this?
Below is an example that works in practice however I have the ID hardcoded in. Ideally, this ID will dynamically inherit from the object that was just saved and link there. Is JavaScript the best idea here or should (can) I launch the popup from the Controller?
<input type="submit" value="Create" />
<input type="submit"
value="Create & Print"
onclick="window.open('Print/f1ad6330-2978-4ea9-9116-65f861412260'
, 'PRINT'
, 'height=200,width=200');" />
Best option is to create another action which returns string (last-insert-id), post data to it through ajax and get last-insert-id back in javascript then you can use it to open new window.
Now suppose this is new controller action:
[HttpPost]
public string CreateAndPrint(Object obj)
{
// Save data here / insert record here
if (Request.IsAjaxRequest())
{
// Now get last insert id
string lastInsertId = db.GetLastInsertId; // get last insert id from database
return lastInsertId;
}
}
Have a javascript function to post the data:
<script type="text/javascript">
function creteAndPrint() {
$.ajax(
{
url : "CreateAndPrint",
type: "POST",
data : $("#from1").serialize(),
success:function(data)
{
var lastInsId = data; // you will get last insert id here.
var secWin = window.open('Print/'+lastInsId
, 'PRINT'
, 'height=200,width=200');
secWin.focus();
}
});
}
</script>
And call this function only on create & print button:
<input type="submit" value="Create & Print" onclick="creteAndPrint();" />
Hope it works for you. Thank you.
Here I am editing my answer after your comment :)
Yes! you can call the same Create action for achieving the same which I explained above. But for that you have to make some changes in the your Create action:
public string Create(Object obj)
{
// Save data here / insert record here
if (Request.IsAjaxRequest())
{
// Now get last insert id
string lastInsertId = db.GetLastInsertId; // get last insert id from database
return PartialView("_Create", lastInsertId);
}
return View();
}
Notice that when you call this action through AJAX it will return a partial view, which return just LAST_INSERT_ID as string. You just have create one simple partial view _Create to print last-insert-id.
Partial view will have only two lines:
#model string
#Model
This will print the last-inst-id which we have passed from controller action.
I ended up bypassing the form's default submit call to the Create method and just created two new methods. It's not ideal, but it works.
SOLUTION
Form:
#using (Html.BeginForm("Dummy", "Count", FormMethod.Post, new { id = "form1" }))
{
// My Form
// Note the Dummy controller which will just fall through and do nothing
}
Form Submit:
<input type="submit" value="Create & Print" onclick="createAndPrint();" />
<input type="submit" value="Create" onclick="createWithoutPrinting();" />
JavaScript:
<script type="text/javascript">
function createAndPrint() {
$.ajax(
{
url: "CreateAndPrint",
type: "POST",
data: $("#form1").serialize(),
success: function (data) {
var lastInsId = data; // you will get last insert id here.
var secWin = window.open('Print/' + lastInsId
, 'PRINT'
, 'height=450,width=230');
secWin.focus();
}
});
}
</script>
<script type="text/javascript">
function createWithoutPrinting() {
$.ajax(
{
url: "Create",
type: "POST",
data: $("#form1").serialize()
});
}
</script>
Controller:
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Dummy(Count count)
{
return RedirectToAction("Create");
}
[HttpPost]
public string CreateAndPrint(Count count)
{
SaveCount(count);
if (Request.IsAjaxRequest())
{
// Now get last insert id
string lastInsertId = count.Id.ToString();
return lastInsertId;
}
return "";
}
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create(Count count)
{
SaveCount(count);
if (Request.IsAjaxRequest())
{
// Now get last insert id
string lastInsertId = count.Id.ToString();
return PartialView("_Create", lastInsertId);
}
return RedirectToAction("Create");
}