How to call a JavaScript function from controller in MVC 4? - javascript

I am new to MVC, so please ignore my mistakes. I want to call a JavaScript function from controller, I tried myself and searched to call JavaScript function but did not find any reasonable solution. Please help
Here is my code.
[AllowAnonymous]
public ActionResult Index()
{
LogisticQuote lq = new LogisticQuote();
if (Request.QueryString["token"] != null)
{
byte[] byteArray = Convert.FromBase64String(Request.QueryString["token"]);
string values = System.Text.Encoding.UTF8.GetString(byteArray);
EdgeMoveService serivice = new EdgeMoveService();
Edge.Move.Common.Status.ServiceStatus serviceStatus = serivice.GetLogisticQuote(values.Split('&')[1].Split('=')[1], String.Empty, new TenantId(values.Split('&')[0].Split('=')[1]), "", 1, 1, new SaveId(values.Split('&')[2].Split('=')[1]), out lq);
if (serviceStatus.IsOkay)
{
TimeSpan difference = (DateTime.Now.Subtract(lq.CreatedTimeStamp));
if (difference.TotalHours <= 24)
{
if (!lq.IsExpire)
{
return View("QuoteDetails", lq);
}
else
{
ViewBag.Message = "alertError('" + String.Empty + "');";
return View("ExpireLinkNotification", lq);
}
}
else
{
return View("ExpireLinkNotification", lq);
}
}
}
return View("Startup", lq);
}

This is not a good practice.
You should avoid messing up javascript in you controllers code, thats what MVC is built for. Separation of concerns.
What you can do?
Pass the message to be displayed in the ViewBag or ViewData.
Receive this message in the script tag at the view side (store it in a javascript variable).
Check if message is non-empty show it in alert.
View.cshtml
<script>
var msg='#ViewBag.Message';
if(msg && msg.length>0)
alert(msg);
</script>

You have two options to do that.
Option #1
Call the controller method from using jquery ajax call and then in the success method you can fire your js method.
Option #2
In the document.ready event of your cshtml page, you can do like this
$.document.ready(function(){
var msg = '#ViewBag.Message'
if(msg != undefined && msg !== "")
alert(msg);
});

Related

Constructing URL using HtmlHelper in ASP.NET MVC

I am trying to construct a URL using a HTML helper extension method while trying pass in parameters to the extension method. For example
public static MvcHtmlString GenerateActionLink(this HtmlHelper html,string displayText,string id,int logicstatusId)
{
var actionName = string.Empty;
var controllerName = string.Empty;
if (logicstatusid == 5)
{
actionName = "Basic";
controllerName = "HighBasic";
}
else
{
action = "Advanced";
controllerName = "HighAdvanced";
}
var targetURL = UrlHelper.GenerateUrl("Default", action, controller, new RouteValueDictionary(new { id = id}), RouteTable.Routes, html.ViewContext.RequestContext, false);
//Create the hyper link tag
var anchorLinkBuilder = new TagBuilder("a");
//Merge the target URL with the href attribute
anchorLinkBuilder.MergeAttribute("href", targetURL);
return MvcHtmlString.Create(anchorLinkBuilder.ToString(TagRenderMode.Normal));
}
While this helper method is working, the problem I am facing is on the client side.
var cellHtml = '<div class="action-column">';
var id= row.encryptedId;
cellHtml += '#Html.GenerateHtmlLink("Blip","'+ id+'" , 4)';
cellHtml += "</div>";
return cellHtml;
In this case the URL is getting constructed but the id parameter is not passing on to the helper method. I am not sure if I have done the passing of the parameter the right way. I'd appreciate if anybody help out.
Your C# code (call to the GenerateActionLink helper method) gets executed in server when razor tries to render the view. At that time the js variable value will not be there. The output of razor executing all the C# code view file is just the html markup which the browser will render. Only after that your javascript will be executed and the js variable value will be avaialble.
If you absolutely need to generate the dynamic url (for each id/logicstatusId value) in your client side javascript code using the UrlHelper method, you might consider exposing that C# code via an action method. Whenever you need the link url in your javascript code, make an ajax call to the action method, pass the parameter value and get the url.
public string GenerateActionLink(string id, int logicstatusId)
{
var actionName = "Advanced";
var controllerName = "HighAdvanced";
if (logicstatusId == 5)
{
actionName = "Basic";
controllerName = "HighBasic";
}
var targetUrl = UrlHelper.GenerateUrl("Default", actionName, controllerName, new RouteValueDictionary(new { id = id }), RouteTable.Routes, Request.RequestContext, false);
return targetUrl;
}
And in client side
var id = 1;
$.get('/Home/GenerateActionLink?logicstatusId=5&id=' + id,function(res) {
var htmlMarkup = 'Blip';
// do something with htmlMarkup
// Ex : $('#SomeDivId').append(htmlMarkup);
});
But if you want to do this for many items, you might not want to make a call for each items, In that case,I would generate the base links and conditionally append the querystring values in javascript
var baseUrlBasic = "#Url.Action("Basic","HighBasic");
// Now later
var id = 1;
var newUrl = baseUrl+'?logicstatusId=5&id='+id;
// Use this to build the anchor tag

Error page always loads inside partial view

I've been struggling to get around this problem for quite a while now but I cannot seem to find a solution that works for me.
I handle all errors by overriding OnException method in my BaseController class, which all others controllers inherit.
protected override void OnException(ExceptionContext filterContext)
{
filterContext.ExceptionHandled = true;
var rd = new RouteData
{
Values = { ["controller"] = "Error", ["action"] = "Index" },
DataTokens = { }
};
var error = $#"Error: {filterContext.Exception.Message} in {filterContext.HttpContext.Request.FilePath}
Details:
{filterContext.Exception.StackTrace}";
_logger = LogManager.GetLogger(GetType());
_logger.Error(error + Environment.NewLine + "Temp Id: " + AppSession.TempId);
IController c = new ErrorController();
c.Execute(new RequestContext(new HttpContextWrapper(System.Web.HttpContext.Current), rd));
}
My error controller is pretty simple:
public ActionResult Index()
{
ViewBag.Error = "Oops.. Something went wrong";
return View("Error");
}
It works, Error page shows up, but it always loads up inside the partial view container, the partial view that raised the error. Instead, I want to do a proper redirect to just error page alone.
I've tried using and handle errors that way but it behaves in exact same manner. I've also tried handling errors in Global.asax Application_Error method, which I knew wouldn't make any difference but I wanted
to try it anyways..
My guess is because the partial view is loaded via $.get call it somehow wraps the response in the same div/container the partial view was supposed to load.
Any help would be greatly appreciated. Should you need more information, please let me know.
I've also tried looking up on SO for similar scenarios but no post, that i've found, has a good solution...
Thanks in advance.
What you should be doing is, If the error happens in an ajax call, you should be sending a json response with a property which indicates which url to redirect to. If it is not an ajax request, you can send the normal redirectresult.
Something like this
protected override void OnException(ExceptionContext filterContext)
{
//your existing code to log errors here
filterContext.ExceptionHandled = true;
if (filterContext.HttpContext.Request.Headers["X-Requested-With"] == "XMLHttpRequest")
{
var targetUrl = UrlHelper.GenerateUrl("Default", "Index", "Error",
new RouteValueDictionary(), RouteTable.Routes, Request.RequestContext, false);
filterContext.Result = new JsonResult
{
JsonRequestBehavior = JsonRequestBehavior.AllowGet,
Data = new { Error = true, Message = filterContext.Exception.Message,
RedirectUrl= targetUrl }
};
filterContext.HttpContext.Response.StatusCode = 500;
filterContext.ExceptionHandled = true;
}
else
{
filterContext.Result = new RedirectToRouteResult(new RouteValueDictionary
{{"controller", "Error"}, {"action", "Index"}});
}
}
Now you can listen the .ajaxError() event which will be fired anytime an ajax request completes with an error. Get the RedirectUrl value and redirect as needed. You may also consider showing a meaningful message to user (Even in a partial view from the modal dialog) so user won't be confused by the blind redirect !
$(function () {
$(document).ajaxError(function (event, request, settings) {
console.log('ajax request', request.responseText);
var d = JSON.parse(request.responseText);
alert("Ajax error:"+d.Message);
window.location.href = d.RedirectUrl;
});
});

Get return value from Controller to javascript

What I want is, I want to check whether there is a file in the database or not. To do this I have a method in the controller which checks this and returns a boolean for the corresponding case. It looks like this:
public bool fileInDb(int empId)
{
using (SLADbContext db = new SLADbContext())
{
bool file = db.CompetenceUploads.Any(x => x.EmployeeId == empId);
if (file)
{
return true;
}
else
{
return false;
}
}
}
I simply just check if there is any file assigned to the given employee.
Now I would like to call this method from my javascript in the view, and get the return value, so that I can let the user know, if there is a file assigned to the selected employee or not. It may look like this:
$("#get-file").click(function() {
empId: $("#EmployeeSelect").val();
var fileInDb = // Get the return value from the method 'fileInDb'
if(fileInDb) {
// Let the user download the file he/she requested
var url = "#Url.Action("GetUploadedFile", "Competence")";
this.href = url + '?empId=' + encodeURIComponent($("#EmployeeSelect").val());
} else {
alert("There is no file assigned to this employee.");
}
});
So my question now is, how do I get the get the return value from the method in the controller?
I would suggest few changes here:
Change your controller method to have return type ActionResult or JsonResult and I prefer JsonResult would be enough here and retrun Json response from controller and manipulate this method with $.get. You also need to change parameter to string because the parameter will be received as Json string.
public JsonResult fileInDb(string eId) //change signature to string and then convert to int
{
int empId=Convert.ToInt32(eId);
using (SLADbContext db = new SLADbContext())
{
bool file = db.CompetenceUploads.Any(x => x.EmployeeId == empId);
if (file)
{
return Json(new { result = true },JsonRequestBehavior.AllowGet);
}
else
{
return Json(new { result = false},JsonRequestBehavior.AllowGet);
}
}
}
Now your ajax-get call would be as below:
$("#get-file").click(function() {
var eId= $("#EmployeeSelect").val();
$.get('/YourControllerName/fileInDb',{'eId':eId},function(response){
//you just need to get the response so $.get is enough to manipulate
//this will be called once you get the response from controller, typically a callback
if(response.result) //same result variable we are returning from controller.
{
// Let the user download the file he/she requested
var url = "#Url.Action("GetUploadedFile", "Competence")";
this.href = url + '?empId=' + encodeURIComponent($("#EmployeeSelect").val());
} else {
alert("There is no file assigned to this employee.");
}
})
});
You need to set-up a single page script using your ASP fileInDb function and then communicate with that page using AJAX from the browser. If you're unfamiliar with AJAX I'd recommend using the jQuery implementation to get you started.
You can use jquery and ajax to achieve this. Call your method using an ajax call from your client code. Here is an example as a reference :Calling controller method from view
In the backend create a method to call, returning a JsonResult
public JsonResult fileInDb(int empId)
{
// your code - set fileExists to true/false
JsonResult returnObj = new JsonResult
{
Data = new
{
FileExists = fileExists ;
}
};
return Json(returnObj);
}
in your javascript code use $.ajax
$.ajax({
cache: false,
url: '#Url.Action("fileInDb")',
data: { 'empId': someVar },
type: 'POST',
success: function (response) {
if (response.Data.FileExists === true) {
// do something
} else {
// it was false
}
},
error: function (er) {
alert('Error!' + er);
}
});

Call Controller from .cshtml via getJSON

I have performed this action within a .js file without issue and I am wondering if I have to do something a little different from a .cshtml because I can't seem to find any other reason this is failing. Here is my js within my .cshtml file:
mergeBtn.onclick = function (e) {
e.preventDefault();
var url = '/api/publicpatron/student-no-validation?studentNo=' + studentNo.value;
$.getJSON(url)
.done(function (json) {
if (json.errors) {
toastr.error(json.message, '', { timeOut: 0, extendedTimeOut: 0 })
}
else {
//do something
}
})
.fail(function (jqxhr, textStatus, error) {
var err = textStatus = ', ' + error;
toastr.error(err, '', { timeOut: 0, extendedTimeOut: 0 })
})
}
The code in the controller doesn't seem to be the issue as it never gets to the controller, I have verified I have the controller file name and function name correct in my URL. Any suggestions? Is this not possible from within a .cshtml file??
UPDATE:
Here is the controller:
file name: PublicPatronController
[Authorize(Roles = "my-roles")]
[ActionName("student-no-validation")]
public dynamic IsStudentNoValid([FromUri] string studentNo)
{
dynamic results = new ExpandoObject();
if (studentNo == null)
{
results.error = true;
results.message = "Invalid Student Number";
return results;
}
using (ADRoutineEntities db = new ADRoutineEntities())
{
var exists = db.UserLinkages.Any(x => x.StudentNo == studentNo);
if (!exists)
{
results.errors = true;
results.message = string.Format("Student number {0} does not exist", studentNo);
return results;
}
}
results.ok = true;
return results;
}
UPDATE 2:
It does appear to be related to the controller somehow. I changed the url to a different apicontroller I use elsewhere and it worked fine. The issue seems to be related to the name of the apicontroller. When I change it to the name of an existing apicontroller but keep the actionname the same it works. Why would that be???
You should add the [HttpGet]-attribute to the method on the controller.
Normally WebAPI takes the first part of the methodname to determine what HTTP-verb it should use. In your case, that's not a valid http-method, so you need to explicitly add the attribute.
Another option is to change the method name, eg: GetIsStudentNoValid
You should also return an HttpResponseMessage with a status code instead of a dynamic

Succesfull $.Ajax and $.Post calls always return failure from C#

I need a cross domain web api method to return valid jsonp to some javascript from C#. I can't seem to make this magic happen. I've looked around the web and can't find a start to end example that fits my needs and works... Fiddler shows that I'm returning valid json data but when I hit a breakpoint in F12 dev tools or firebug the result is a failure message.
Here is what I've currently got:
C#
/// <summary>
/// POST: /Instance/RefreshItem
/// </summary>
/// <param name="instanceId"></param>
/// <returns>Json</returns>
[HttpPost]
public System.Web.Mvc.JsonResult RefreshItem(int instanceId, Guid customerId)
{
try
{
var clientConnection = Manager.ValidateInstance(customerId, instanceId);
clientConnection.RefreshItem();
var result = new MethodResult()
{
Success = true,
Value = instanceId,
Message = "Item successfully refreshed."
};
return new System.Web.Mvc.JsonResult() { Data = result };
}
catch (Exception ex)
{
Manager.LogException(_logger, ex, customerId, instanceId);
var result = new MethodResult()
{
Success = false,
Value = instanceId,
Message = ex.GetBaseException().Message
};
return new System.Web.Mvc.JsonResult() { Data = result };
}
}
JS
Example.RefreshItem = function ()
{
Example.SDK.JQuery.getSettings(
function (settings, userId, userLocaleId)
{
alert("Attempting to refresh item for instance " + settings.ConnectionId + "\r\nThis may take awhile.");
var url = settings.SystemUrl + "/Api/WebApiServices/ExampleAdmin/RefreshItem?customerId=" + settings.CustomerId + "&instanceId=" + settings.ConnectionId;
$.ajax({
url: url,
dataType: "jsonp",
jsonpCallback: 'RefreshItemCallback',
success: RefreshItemCallback
})
},
Example.SDK.JQuery.defaultErrorCallback
);
}
function RefreshItemCallback(data)
{
alert(data.d.Message);
}
I've also tried $.Post().Always() with the same results.
What am I doing wrong???
I think your problem is that you're instantiating a JsonResult instead of using the Json method.
Presumably the C# method you have is in a controller, so instead of
return new System.Web.Mvc.JsonResult() { Data = result };
do:
return Json(result);
This method probably sets some of the other properties of the JsonResult that, when not set, will not be properly received by the client.
See how Microsoft only shows you how to create a JsonResult via the Json method on MSDN
Note that the same is probably true with methods like View, Content, and File.
Fight all week unable to find an answer until you ask the question somewhere... Within 30 minutes of asking I found this: http://bob.ippoli.to/archives/2005/12/05/remote-json-jsonp/ which was exactly what I needed.
Thanks to all who posted.

Categories