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");
}
Related
I am passing array to controller by ajax. Controller is accessing array and return response successfully. But I want that when controller get array it return different view(suppose A.blade.php) and I can use that array in A.blade.php.
I have seen many replies like use window.location="url" in success:function(){} but it will only go to view without array.
Only purpose is to pass array to controller and controller return another view with array and i don't need of response.
AJAX function
$(function(){
$('#but').click(function() {
alert("Button Click");
;
$.ajax({
type: 'get',
url: '/suck',
data: {arr},
success: function( data ) {
document.getElementById("p").innerHTML =data;
},
error: function(xhr, status, error) {
alert(error);
},
dataType: 'text'
});
});
});
Controller
public function getAjax(Request $req)
{
$input=$req->all();
// Here I want when controller access array it return another view with array and no need of response
return response()->json($input);
}
Routes.web.php
Route::get('/suck',[ajaxcontroller::class,'getAjax']);
Based on your comments, you could dynamically create a form and add the array you want to a hidden element. Then submit the form.
Untested code:
$(function()
{
$('#but').click (
function()
{
var myArray = [];
var myJson = JSON.stringify(myArray);
var myForm = $(document.createElement('form'));
$(myForm).attr("action", "/url/to/controller");
$(myForm).attr("method", "POST");
var input = $("<input>").attr("type", "hidden").attr("name", "myArray").val(myJson);
$(form).append($(input));
$(form).submit();
}
);
}
);
To send an array from view to controller and from controller to other view:
First create a form and use onsubmit attribute
<form id="myid" action="/go" method="post" onsubmit="submitForm(event)">
#csrf
<input type="submit" value="submit">
</form>
Then write function for onsubmit
<script type="text/JavaScript">
function submitForm(event){
var arr=["Tile","Desk","Door"]; // Array which has to pass to controller
var i;
for(i=0;i<arr.length;i++){ // create and append arr.length times
var input = $("<input>").attr("type", "hidden").attr("name", "myArray["+i+"]").val(arr[i]);
$(myid).append($(input)); // append to form
}
this.submit();
}
</script>
Routes
Route::post('/go',[subcontroller::class,'getArray']);
In Controller
class subcontroller extends Controller
{
public function getArray(Request $req)
{
$arr=$req->get('myArray');
return view('viewName',['set'=>$arr]);
}
}
In blade.view, access array as
#foreach($set as $item)
<div>{{$item}}</div>
#endforeach
It worked for me.
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 problem with a Symfony Form which I want to prefill based on which record is viewed beforehand. The intention is to create a means for changing the record data.
I navigate to the form page via javascript and send an ajax request to the same controller the form is rendered by.
This is part of the page used for viewing records:
<input type="button" id="changeRecord" value="change"/>
record id: <div id="recordID"> {{ record_id }} </div>
I access the record id through javascript/jQuery like this:
var CssSelectors = new Array(
"recordID"
);
function getCurrentRecordID() {
return parseInt($.trim($("#" + CssSelectors[0]).text()));
};
The button-code in javascript is the following:
$('#changeRecord').click(function () {
window.location.replace(Routing.generate(recordChangeRoute));
$.ajax({
url: Routing.generate(recordChangeAjaxRoute),
type: "POST",
data: {'recordID': getCurrentRecordID()}
});
// both Routes point to the same controller
// problem located here ???
The Symfony Controller Action is the following:
public function changePlasmidRecordAction(Request $request) {
$em = $this->getDoctrine()->getManager();
$recordHandle = $em->getRepository('DataBundle:RecordClass');
$AjaxRequest = Request::createFromGlobals();
$RecordID = $AjaxRequest->request->get('recordID');
$recordToUpdate = $recordHandle->findOneBy(array('id' => $RecordID));
$updateForm = $this->createForm(new RecordClassType(), $recordToUpdate);
$updateForm->handleRequest($request);
if ($updateForm->isValid()) {
$em->flush();
return this->redirect($this->generateUrl('route_showRecord'));
} else {
return $this->render('DataBundle:RecordClass:updateRecord.html. twig',
array(
'RecordID' => $RecordID,
'form' => $updateForm->createView()
));
}
}
What I am trying to achieve is:
view a record
go to prefilled form
make changes and save
Viewing records, creating the form, persisting the changes to the database - all work. What does not work is accessing the needed ID inside the controller.
I can access the ajax request data the way I try in an other controller action without problems.
How is the "Form Request" interfering? Or is it?
Do I have to use an Event Listener?
Any help is greatly appreciated, thanks in advance!
I fixed it by leaving the ajax stuff away and submitting the required data via GET. Like so:
$('#changeRecord').click(function () {
window.location.replace(Routing.generate(recordChangeRoute, {'recordID': getCurrentRecordID()}));
});
Thank you for your input, all the best.
I want to make a Partial view that displays data in a table.
I will have a Select element with the services to choose from.
When the user Selects a Service in the combobox I want to the call a partial view with the service Id number:
How can I do this?
Here is a action method which will render the partialView
//
// GET: /Service/ServiceStatusLogs/1
public ActionResult ServiceStatusLogs(int id)
{
var db = new EFServiceStatusHistoryRepository();
IList<ServiceStatusHistory> logs = db.GetAllStatusLogs(id);
return View("_ServiceStatusLogs", logs);
}
Here is the main action method which returns the page:
//
// GET: /Services/Status
public ActionResult Status()
{
IList<Service> services;
using (var db = new EFServiceRepository())
{
services = db.GetAll();
}
return View(services);
}
You can make use $.ajax functionality to achieve, check this :-
//Combo box change event
$("#comboboxName").change(function () {
//Get service Id
var serviceId = $("#comboboxName").val();
//Do ajax call
$.ajax({
type: 'GET',
url: "#Url.Content("/Service/ServiceStatusLogs/")",
data : {
Id:serviceId //Data need to pass as parameter
},
dataType: 'html', //dataType - html
success:function(result)
{
//Create a Div around the Partial View and fill the result
$('#partialViewContainerDiv').html(result);
}
});
});
Also you should return partial view instead of view
//
// GET: /Service/ServiceStatusLogs/1
public ActionResult ServiceStatusLogs(int id)
{
var db = new EFServiceStatusHistoryRepository();
IList<ServiceStatusHistory> logs = db.GetAllStatusLogs(id);
return PartialView("_ServiceStatusLogs", logs);
}
Try this:
public ActionResult ServiceStatusLogs( int id )
{
//Prepare your model
return PartialView( "UserDetails", model );
}
Any then use javascript(ajax) to load contents for an element of the DOM:
$('#user_content').load('/Service/ServiceStatusLogs');