I'm trying to use Ajax.BeginForm() to POST A Json result from my controller (I'm using MVC3). When the Json result is called it should be sent to a javascript function and extract the object using
var myObject = content.get_response().get_object();
However it just throws a "Microsoft JScript runtime error: Object doesn't support this property or method" when trying to invoke the Ajax POST.
My code:
Controller:
[HttpPost]
public ActionResult Index(string message)
{
return Json(new { Success = true, Message = message });
}
View:
<!DOCTYPE html>
<html>
<head>
<script src="#Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/MicrosoftAjax.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/MicrosoftMvcAjax.js")" type="text/javascript"></script>
<script type="text/javascript">
function JsonAdd_OnComplete(mycontext) {
var myObject = mycontext.get_response().get_object();
alert(mycontext.Message);
}
</script>
</head>
<body>
<div>
#using(Ajax.BeginForm("Index", "Home", new AjaxOptions() { HttpMethod = "POST", OnComplete = "JsonAdd_OnComplete" }))
{
#Html.TextBox("message")
<input type="submit" value="SUBMIT" />
}
</div>
</body>
</html>
The strange thing is that the exactly same code works in MVC2 - Is this a bug, or have I forgot something?
Thanks in advance.
AFAIK in ASP.NET MVC 3 RC MS AJAX has been deprecated in favor of jQuery which is used by all Ajax.* helper methods. Javascript has become unobtrusive as well. This means that you no longer have to call .get_response().get_object() but simply:
function JsonAdd_OnComplete(myObject) {
// here myObject is already the JSON object
// as returned by the controller action
alert(myObject.Message);
}
Have you looked at the OnSuccess method? When that method is called the object passed to it is a JSON object based on a JSONResult so you could do this...
<script type="text/javascript">
function JsonAdd_OnSuccess(mycontext) {
alert(mycontext.Message);
}
</script>
#using(Ajax.BeginForm("Index", "Home",
new AjaxOptions() {
HttpMethod = "POST",
OnSuccess = "JsonAdd_OnSuccess" })) {
#Html.TextBox("message")
<input type="submit" value="SUBMIT" />
}
In addition the OnComplete method returns an object that contains the following properties
context.responseText
context.responseBody
context.responseXml
You'll have to eval() the responseText to convert the text to JSON though.
if you are using the method provided by BuildStarted, here's how to structure the eval:
var json = eval("(" + context.responseText + ")");
Related
When I select Date in DateTimePicker, it's invoking public ActionResult Index(DateTime? test). It returns some items into the view, but those items do not appear on Index. It seems that this does not work, and I'm unsure why:
<h1>Items</h1>
#foreach (var item in Model)
{
<br />#item.Date
}
Controller:
public class HomeController : Controller
{
//
// GET: /Home/
public ActionResult Index()
{
List<Table> temp = new List<Table>();
return View(temp);
}
[HttpPost]
public ActionResult Index(DateTime? test)
{
masterEntities m = new masterEntities();
List<Table> temp = m.Table.Where(key => key.Date == test).Select(key => key).ToList();
return View(temp);
}
}
Index.cshtml:
#model IEnumerable<DatePicker.Models.Table>
#{
ViewBag.Title = "Index";
}
<script src="~/Scripts/jquery-2.2.0.min.js"></script>
<script src="~/Scripts/moment.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/bootstrap-datetimepicker.min.js"></script>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$('#datetimepicker1').datetimepicker({ useCurrent: false });
$('#datetimepicker1').on("dp.hide", function (e) {
//var temp = $('#datetimepicker1').data('DateTimePicker').date().format('YYYY-MM-DD HH:mm')
$.ajax({
url: "/Home/Index",
type: "POST",
data: { test: $('#datetimepicker1').data('DateTimePicker').date().format('YYYY-MM-DD HH:mm') },
//data: {test: temp },
});
});
</script>
</div>
</div>
<h1>Items</h1>
#foreach (var item in Model)
{
<br />#item.Date
}
First you send an empty list to the view:
List<Table> temp = new List<Table>();
return View(temp);
So the loop doesn't show anything because, well, there's nothing to show. It's an empty list.
Then you make an AJAX request to get items:
$.ajax({
url: "/Home/Index",
type: "POST",
data: { test: $('#datetimepicker1').data('DateTimePicker').date().format('YYYY-MM-DD HH:mm') },
//data: {test: temp },
});
But you don't do anything with those items. You basically ignore the response from the AJAX request.
So... The data doesn't display because you haven't written any code to display the data. The AJAX request should have some sort of callback function to do something with the returned response:
$.ajax({
url: "/Home/Index",
type: "POST",
data: { test: $('#datetimepicker1').data('DateTimePicker').date().format('YYYY-MM-DD HH:mm') },
//data: {test: temp },
success: function (data) {
// do something with the response here
}
});
What you do with the response is up to you. Is it JSON? HTML? Based on the server-side code, it looks like it's HTML. So you can maybe put it into an element on the page. Something like this, perhaps:
$('#someElement').html(data);
That's just one example, and would of course require an element of some sort that you can identify to hold the response. You could do a lot of other things with the response.
One thing to note, however, is that your response appears to be an entire page. It includes script tags, link tags for CSS, and all sorts of markup that you otherwise already have on the client. So putting the entire page into an element isn't going to work right.
You might want to return just a partial view for this AJAX response. Or, otherwise, instead of using AJAX at all just navigate to the action to get that entire page.
In my view I have a tag with an ng-bind attribute that is showing the correct boolean value:
<span id="ShowFlag" name="ShowFlag" ng-bind="session.view.showFlag"></span>
When the form is posted on the server side I would like to bind this to a property on the relevant model.
public bool ShowFlag { get; set; }
However, this is always returning false, whereas the value shown in Span tag is showing correctly as true on the page. Is there something obvious I'm missing here?
I think you're something you're missing about how AngularJs binding works. if you want to get a value from the server into an angular model you can use Razor to get that data into JavaScript (the best place is in your Angular controller.)
Here is a quick sample I put together.
This is code from the MVC Controller. In this example we are using Model data and ViewBag data.
public ActionResult Index()
{
dynamic model = new ExpandoObject();
model.ShowFlag = "True";
ViewBag.ShowFlag = "ViewBag True";
return View(model);
}
This is what the view looks like including reference so Angular, JQuery and the code for the AngularJs app and controller:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Demo</title>
</head>
<body>
<div>
<h2>Sample For Stack Overflow</h2>
<div ng-app="glennapp">
<div ng-controller="testController">
<input type="text" ng-model="showFlag" />
<input type="text" ng-model="showFlag2" />
<div>
<span ng-bind="showFlag" ></span>
<span ng-bind="showFlag2" ></span>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="//code.angularjs.org/1.4.8/angular.min.js"></script>
<script type="text/javascript">
var mainApp = angular.module('glennapp', ['glennControllers']);
var glennControllers = angular.module('glennControllers', []);
glennControllers.controller('testController', ['$scope', function ($scope) {
$scope.showFlag = '#ViewBag.ShowFlag';
$scope.showFlag2 = '#Model.ShowFlag';
}]);
</script>
</body>
</html>
Another option would be to create an MVC action that returns JsonResult and then write some JavaScript to make an Ajax call and retrieve the data.
When posting a form only input and select tag values are passed to the server
in you case ShowFlag is a span, so you need to make it an input:
<input type="checkbox" id="ShowFlag" name="ShowFlag" ng-bind="session.view.showFlag"/>
If you are posting to server with ajax, make sure that you serialize your model properly:
for example for the following action:
public ActionResult (FlagsConatiner container)
{
//
}
public class FlagsConatiner
{
public bool ShowFlag { get; set; }
}
Serialized model should look like this:
{
"ShowFlag":"true"
}
As pointed out above, you must use an input for the binding to be successful. I used the following which is now working:
<input type="hidden" id="ShowFlag" name="ShowFlag" ng-value="session.view.showFlag">
I'm trying to implement the select2 on my master layout of my ASP.NET MVC 4 website.
I want it to, as soon as the user starts typing (minimum of 2 letters), call my method to query the database using the letters the user has already typed. Except, when I start typing, my method never gets called. I threw in some alerts and I'm able to see what I'm typing, but the select2 isn't firing, I think.
Here's the script and css references in the tag:
<script src="/Content/select2/select2.js"></script>
<link href="/Content/select2/select2.css" rel="stylesheet" />
Here's the search box in my layout.cshtml file:
<div class="navbar-header hidden-xs pull-right" style="padding-top: 10px; margin-left: 10px;">
<input id="search" class="form-control" placeholder="Search..." type="text" data-autocomplete-url="/Home/AutoFillValues" />
</div>
And here's the bottom of my layout page where the select2 stuff appears:
<script src="/Scripts/jquery-1.9.1.min.js"></script>
<script src="/Scripts/bootstrap.min.js"></script>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryui")
#Scripts.Render("~/bundles/jqueryval")
#RenderSection("scripts", required: false)
<script type="text/javascript">
$(document).ready(function () {
$("#search").select2({
placeholder: "Search...",
minimumInputLength: 2,
ajax: {
url: "~/Home/AutoFillSearch",
dataType: 'jsonp',
data: function(search) {
return {
q: search
};
},
results: function(search, page) {
return { results: data.Results };
}
}
});
});
</script>
Lastly, here's my controller method (I'm not worried about the code here yet, I just want to see my breakpoint get hit at the first line...):
public ActionResult AutoFillValues()
{
// Get all wrestlers and all teams
var players = _playerRepo.Query().Where(w => w.Division == "Division I" && w.Conference != null);
var schools = players.Select(w => w.School).Distinct();
ArrayList list = new ArrayList();
foreach (var school in schools)
{
var hyperlinkFormat = "{1}";
//#HttpUtility.UrlEncode(Model.Team.Name, System.Text.Encoding.UTF8)
list.Add(string.Format(hyperlinkFormat, string.Format(RosterPath, school), string.Format(RosterText, school)));
}
foreach (var player in playerss)
{
var hyperlinkFormat = "{1}";
//#HttpUtility.UrlEncode(Model.Team.Name, System.Text.Encoding.UTF8)
list.Add(string.Format(hyperlinkFormat, string.Format(RosterPath, player.School), string.Format(RosterText, player.School)));
}
return Json(list.ToArray());
}
I had to upgrade to jQuery 2.1 (because of the issue with version 1.9 and the .live/.on functions) in order for my select2 to start firing.
Now I just need to get my select2 styled...
I have a pretty simple index page for an MVC project which allows you to create "jobs" and edit existing jobs. I'm trying to use an Ajax link to replace the contents of a div with the job-edit form, which the Create() and Edit() actions return as a partial view. Instead, when you click on the Ajax links, the entire page content is replaced with the partial view, instead of just the contents of the appropriate div element. Here's the relevant .cshtml code:
#{
string placeholder = "777777";
}
<body>
<ol id="JobListing">
#Html.Partial("_ExportJobListingPartial", Model)
</ol>
<br /><br /><br />
#Ajax.ActionLink("New", "Create", new AjaxOptions { UpdateTargetId = "EditJobContainer", InsertionMode = InsertionMode.Replace, HttpMethod = "GET" })
<br /><br />
<div id="EditJobLinkContainer">
#Ajax.ActionLink("Edit", "Edit",
new { id = placeholder }, // Route values
new AjaxOptions { UpdateTargetId = "EditJobContainer", InsertionMode = InsertionMode.Replace, HttpMethod = "GET" }, // Ajax options
new { id = "EditJobLink" } // Html attributes
)
</div>
<br /><br />
<div id="EditJobContainer">
EMPTY BOX HERE
</div>
<br />
</body>
</html>
<script>
$(function() {
$("#JobListing").selectable({
selected: function (event, ui) {
// Select only one at a time
$(ui.selected).addClass("ui-selected").siblings().removeClass("ui-selected");
$("#EditJobLinkContainer").html('#Ajax.ActionLink("Edit", "Edit",
new { id = placeholder }, // Route values
new AjaxOptions { UpdateTargetId = "EditJobContainer", InsertionMode = InsertionMode.Replace, HttpMethod = "GET" }, // Ajax options
new { id = "EditJobLink" } // Html attributes
)');
$("#EditJobLink").click(UpdateOnClick);
}
});
$("#EditJobLink").click(UpdateOnClick);
function UpdateOnClick() {
//Get the id of the selected item
var id = $(".ui-selected").first().attr("name");
this.href = this.href.replace("#placeholder", id);
}
});
</script>
Most of the answers I've read online to similar questions suggest that maybe I'm not including the unobtrusive-ajax code correctly or in the right place. I have it in the _Layout view, before the RenderBody() call, as
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
I know this code is loading in because I inserted an alert() call into the unobtrusive-ajax.js file which launches on page load, and the links to the code in Chrome work fine. However, I had to manually replace the calls to live() with on() in the ajax scripts since live() is deprecated in the most recent version of jQuery, even though I'm pretty sure they're the latest scripts with MVC4. At one point the Ajax call was actually working for the "New" link, but I've made changes since, and nothing has been working for a few days now. Any help would be greatly appreciated.
I use empty dedicated div for that
the html is
<div id="targetDiv">
and the script is
$(".get-roles").live("click", function (e) {
$("#targetDiv").empty();
$.ajax({
url: "edit",
type: 'GET'
xhrFields: {
withCredentials: true
},
success: function (data) {
if (data) {
$("#targetDiv").append(data);
}
else {
$("#targetDiv").text("Error");
}
}
});
});
you need to include this in your page
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
I try to implement Fineuploader in my MVC4 project but it always fails to upload. What i did:
added css and js files to my view:
<link href="~/Content/fineuploader.css" rel="stylesheet" />
<script src="~/Scripts/js/util.js"></script>
<script src="~/Scripts/js/button.js"></script>
<script src="~/Scripts/js/dnd.js"></script>
<script src="~/Scripts/js/handler.base.js"></script>
<script src="~/Scripts/js/handler.form.js"></script>
<script src="~/Scripts/js/handler.xhr.js"></script>
<script src="~/Scripts/js/header.js"></script>
<script src="~/Scripts/js/jquery-plugin.js"></script>
<script src="~/Scripts/js/uploader.basic.js"></script>
<script src="~/Scripts/js/uploader.js"></script>
added the code for the upload button and exceution of the script (i think this isn't right?)
<script>
function createUploader() {
var uploader = new qq.FineUploader({
element: document.getElementById('fine-uploader'),
debug: true,
request: {
endpoint: '/Upload/UploadFile/'
}
});
}
window.onload = createUploader;
</script>
added the C# files to my project FineUpload.cs, FineUploadResult.cs and the Controller UploadController.cs. I also added a route to the controller:
routes.MapRoute(
name: "upload",
url: "Upload/UploadFile",
defaults: new { controller = "Upload", action = "UploadFile" }
);
The controller is:
public class UploadController : Controller
{
[HttpPost]
public FineUploaderResult UploadFile(FineUpload upload, string extraParam1, int extraParam2)
{
...
}
}
But UploadFile is never called on the server.
You seem to have messed up your script inclusions (order and everything). You should choose whether you need to use the FineUploaderBasic mode, the FineUploader mode or the jQuery plug-in mode. Given your code you seem to be using the standard mode.
Here's a full working example and the minimal markup:
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<link href="~/Content/fineuploader.css" rel="stylesheet" />
</head>
<body>
<div id="fine-uploader">Click me to upload a file</div>
<script src="~/Scripts/js/header.js"></script>
<script src="~/Scripts/js/util.js"></script>
<script src="~/Scripts/js/button.js"></script>
<script src="~/Scripts/js/handler.base.js"></script>
<script src="~/Scripts/js/handler.form.js"></script>
<script src="~/Scripts/js/handler.xhr.js"></script>
<script src="~/Scripts/js/uploader.basic.js"></script>
<script src="~/Scripts/js/dnd.js"></script>
<script src="~/Scripts/js/uploader.js"></script>
<script type="text/javascript">
function createUploader() {
var uploader = new qq.FineUploader({
element: document.getElementById('fine-uploader'),
debug: true,
request: {
endpoint: '#Url.Action("UploadFile", "Uploader")'
}
});
}
createUploader();
</script>
</body>
</html>
Also your controller action seem to be taking some extra integer parameter. If you do not specify it with the request, this request will obviously fail. Use a nullable integer in this case.