I am working on project using MVC 3.0(Razor framework). I am trying to get values from controller to view using Viewdata on Button click in Javascript Method.Its coming on document.ready but not on Button click.So please help to get the viewdata value on button click.
Following is my code
[HttpPost]
public ActionResult Update()
{
ViewData["myInfo"] = "my info";
return View();
}
And my JAvascript code:
<script type="text/javascript">
$(document).ready(function () {
$("#btn").click(function () {
$.post("/ImportCSV/Update", {},
function ()
{
var g = '#ViewData["myInfo"]';
});
});
});
</script>
I want to show Viewdata value on button click
You'd better return a JSON result in this case. ViewData is bad. Don't use it. In your case it doesn't work because you need to define a corresponding view of this controller action that will interpret the ViewData and it is the final HTML fragment that you will get in the AJAX success callback. Using JSON you can directly send some data to the calling script:
[HttpPost]
public ActionResult Update()
{
return Json(new { myInfo = "my info" });
}
and then send an AJAX request to this controller action:
<script type="text/javascript">
$(document).ready(function () {
$("#btn").click(function () {
var url = #Url.Action("Update", "ImportCSV");
$.post(url, {}, function (result) {
var myInfo = result.myInfo;
alert(myInfo);
});
});
});
</script>
Related
This is my View Page:
#using (Html.BeginForm("GetAction", "GetController", FormMethod.Post))
{
//bodypage:
}
This is my controller method.
[ActionName("GetAction")]
[HttpPost]
public ActionResult GetAction(string i)
{
//doing stuff:
return View();
}
This is my Ajax call
$(document).ready(function () {
$("#value").click(function () {
$.ajax({
type: 'POST',
url: '#Url.Action("GetAction", "GetController")',
data:
{
'i': $("#i").val()
}
});
});
});
I dont get it why controller getting called twice. I also even config my route class but i
dont know how to do it.
Since you are using ajax remove from the view button
type="submit
and fix the javascript:
$("#value").click(function (e) {
e.preventDefault();
e.stopImmediatePropagation();
....your ajax code
});
I have a method which return an action to a different controller. I am using return RedirectToAction and passing a parameter with it. The parameter successfully passed to the other controller. But it does not return any view. The page should load and return a new view. Here is my code:
Controller 1:
public ActionResult Work(int id, int staffId)
{
return RedirectToAction("CreateStaffWork", "Staff", new { id = staffId});
}
Controller 2 (Staff):
public ActionResult CreateStaffWork(int id)
{
Staff staffInfo= db.Staff.Find(id);
StaffInputModel newStaffWork = new StaffInputModel { StaffId = staffInfo.Id };
return View(newStaffWork);
}
It should return CreateStaffWork view, but the page does not reload. There is no error while running the code. What should I do for the view to return?
I submit the form using ajax request:
<script type="text/javascript">
$(document).ready(function () {
$("#LoadStaffListTable tbody").on('click', '.select', function (e) {
e.preventDefault();
$.ajax({
url: '/StaffWork/Work',
type: 'POST',
data: { id: $(this).data('id'), staffId: $(this).data('staffId') },
dataType: 'json',
}); // end ajax
});
});
As mentioned in the comments, the purpose of ajax is to stay in the same page. If you're redirecting to a new page, you simply redirect to the Work action methods with proper parameters.
Change your click event handler to:
$("#LoadStaffListTable tbody").on('click', '.select', function(e) {
location.href = '#Url.Action("Work", "StaffWork")?id=' + $(this).data('id') + '&staffId=' + $(this).data('staffId');
});
Typically I would create a submit button to post data, but in this case I want the [HttpPost] action to post on page load. This page is collecting data from other sources and there is no need for the user to hit submit.
simply use ajax call, imagine that a get action returns the list of tags like this:
public ActionResult Index()
{
var tags = _tagRepository.GetAllTag();
return View(tags);
}
now in the view of index you have all tags, and also want to add the remove capability, now you can do this by ajax call:
#model IList<Blog.Domain.Model.Tag>
//list of tags here
<script type="text/javascript">
$(function () {
$(".delete").click(function (e) {
e.preventDefault();
var link = this.href;
$.ajax({
type: 'Post',
url: link,
success: function (data) { }
});
});
});
</script>
and about the post action:
[HttpPost]
public JsonResult Delete(int tagId)
{
if (ModelState.IsValid)
{
_tagRepository.RemoveTag(tagId);
_tagRepository.Save();
RedirectToAction("Index");
}
return Json("");
}
If you don't want to use AJAX, you can simply submit the form with jQuery:
$('form').submit();
I have a view (Index.cshtml) with a grid (Infragistics JQuery grid) with an imagelink. If a user clicks on this link the following jquery function will be called:
function ConfirmSettingEnddateRemarkToYesterday(remarkID) {
//Some code...
//Call to action.
$.post("Home/SetEnddateRemarkToYesterday", { remarkID: remarkID }, function (result) {
//alert('Succes: ' + remarkID);
//window.location.reload();
//$('#remarksgrid').html(result);
});
}
Commented out you can see an alert for myself and 2 attempts to refresh the view. The location.reload() works, but is basically too much work for the browser. The .html(result) posts the entire index.cshtml + Layout.cshtml double in the remarksgrid div. So that is not correct.
This is the action it calls (SetEnddateRemarkToYesterday):
public ActionResult SetEnddateRemarkToYesterday(int remarkID) {
//Some logic to persist the change to DB.
return RedirectToAction("Index");
}
This is the action it redirects to:
[HttpGet]
public ActionResult Index() {
//Some code to retrieve updated remarks.
//Remarks is pseudo for List<Of Remark>
return View(Remarks);
}
If I don't do window.location.reload after the succesfull AJAX post the view will never reload. I'm new to MVC, but i'm sure there's a better way to do this. I'm not understanding something fundamental here. Perhaps a nudge in the right direction? Thank you in advance.
As you requesting AJAX call, you should redirect using its response
Modify your controller to return JSONResult with landing url:
public ActionResult SetEnddateRemarkToYesterday(int remarkID) {
//Some logic to persist the change to DB.
var redirectUrl = new UrlHelper(Request.RequestContext).Action("Index", "Controller");
return Json(new { Url = redirectUrl });
}
JS Call:
$.post("Home/SetEnddateRemarkToYesterday", { remarkID: remarkID }, function (result) {
window.location.href = result.Url
});
After Ajax post you need to call to specific Url..
like this..
window.location.href = Url
When using jQuery.post the new page is returned via the .done method
jQuery
jQuery.post("Controller/Action", { d1: "test", d2: "test" })
.done(function (data) {
jQuery('#reload').html(data);
});
HTML
<body id="reload">
For me this works. First, I created id="reload" in my form and then using the solution provided by Colin and using Ajax sent data to controller and refreshed my form.
That looks my controller:
[Authorize(Roles = "User")]
[HttpGet]
public IActionResult Action()
{
var model = _service.Get()...;
return View(model);
}
[Authorize(Roles = "User")]
[HttpPost]
public IActionResult Action(object someData)
{
var model = _service.Get()...;
return View(model);
}
View:
<form id="reload" asp-action="Action" asp-controller="Controller" method="post">
.
.
.
</form>
Javascript function and inside this function I added this block:
$.ajax({
url: "/Controller/Action",
type: 'POST',
data: {
__RequestVerificationToken: token, // if you are using identity User
someData: someData
},
success: function (data) {
console.log("Success")
console.log(data);
var parser = new DOMParser();
var htmlDoc = parser.parseFromString(data, 'text/html'); // parse result (type string format HTML)
console.log(htmlDoc);
var form = htmlDoc.getElementById('reload'); // get my form to refresh
console.log(form);
jQuery('#reload').html(form); // refresh form
},
error: function (error) {
console.log("error is " + error);
}
});
I´m new with MVC. I´m using MVC4.
I'm having an issue with a callback. If I alert before and after the post() call both alerts show but the call doesn't fire.
[HttpGet]
[Authorize]
public ActionResult Dashboard(int Menu)
{
//some code
return View("Dashboard");
}
<script>
$(document).ready(function () {
$.post("../Client/GetFact", {},
function (data) {
//some code
});
});
</script>
[HttpPost]
[Authorize]
public JsonResult GetFact()
{
//some code to fill object_data
var data = object_data;
return Json(data);
}
As long as I leave ActionResult Dashboard without a parameter is works. If I add a parameter to Dashboard(int Menu) then the call back to GetFact doesn't work.
I searched and found a similar post and follow the instructions given by you guys, but still does not work( looked at: getJSON not working if the mvc model view controller has a parameter).
I do not know what I'm doing wrong. Can you help? Thank's!
I do something similar with $.get, using jquery with the #Url.Action instead of the url.
in addition to using the FormContext to pass to my Action :
Place just before #using (Html.BeginForm())
#{ ViewContext.FormContext = new FormContext(); }
example :
$.get('#Url.Action("ActionName", "ControllerName")', { IDName: $('#IdName').val() }, function (data) {
//Do Something here with the data
});
I would imagine form post would be
$.post('#Url.Ation("ActionName", "ControllerName")', function (data) {
//Do Something here with the data
});
This is a shorthand Ajax function, which is equivalent to:
$.ajax({ type: "POST",
url: url,
data: data,
success: success,// -> call alert here
dataType: dataType});