We Keep Coding

Transform Querystring to RouteValue in Razor View

I'm stuck with a very basic detail in a view.
I want to be able to let the user filter the results in the Index view.
To do this I've created a dropdown list, which gets populated thourgh my viewmodel:
#using (Html.BeginForm("Index", "Captains", FormMethod.Get)) {
<div class="row">
<div class="dropdown">
#Html.DropDownList("Name", new SelectList(Model.SomeProperty), new { id = "FilterList" })
</div>
</div>
#* ... *#
}
Additionally I have a small jQuery snippet to submit the form on the change event:
$('#FilterList').on('change', function () {
var form = $(this).parents('form');
form.submit();
});
The route I have created for this looks like this:
routes.MapRoute(
name: "IndexFilter",
url: "{controller}/{action}/{Name}",
defaults: new { Name = UrlParameter.Optional}
);
After the submit event I get redirected to the url /Index?Name=ChosenValue
This is filtering totally correct. However I'd like to get rid of the querystring and transform the route to /Index/ChosenValue.
Note: "Name", "ChosenValue" & "SomeProperty" are just dummy replacements for the actual property names.

Instead of submitting the form, you can concatenate /Captains/Index/ with the selected value of the dropdown and redirect to the url using window.location.href as below
$('#FilterList').on('change', function () {
window.location.href = '/Captains/Index/' + $(this).val();
});

I think you're looking for the wrong routing behavior out of a form submit. The type of route resolution that you're hoping to see really only happens on the server side, where the MVC routing knows all about the available route definitions. But the form submission process that happens in the browser only knows about form inputs and their values. It doesn't know that "Name" is a special route parameter... it just tacks on all the form values as querystring parameters.
So if you want to send the browser to /Index/ChosenValue, but you don't want to construct the URL from scratch on the client, you need to construct the URL on the server when the view is rendering. You could take this approach:
<div class="row">
<div class="dropdown">
#Html.DropDownList("Name", new SelectList(Model.SomeProperty),
new {
id = "FilterList",
data_redirect_url = #Url.Action("Index", "Captains", new { Name = "DUMMY_PLACEHOLDER" })
})
</div>
</div>
Above you're setting the URL with a dummy "Name" value that you can replace later, then you'll do the replacement with the selection and redirect in javascript:
$('#FilterList').on('change', function () {
var redirectUrl = $(this).data('redirect-url');
window.location.href = redirectUrl.replace("DUMMY_PLACEHOLDER", $(this).val());
});

If you are wanting to drop the query string off the url because it looks weird, then change your FormMethod.Post.
However, to really answer your question, I've tried the following successfully (Note: this might be considered a hack by some)
In short: update the action url on the form element when the list changes, client side.
$('#FilterList').on('change', function () {
var form = $(this).parents('form');
var originalActionUrl = form.attr("action");
var newActionUrl = originalActionUrl + "/" + $(this).val();
form.attr("action", newActionUrl);
console.log(form.attr("action"));
form.submit();
});
You will need to change your controller's signature to match whatever optional param value you specify in your route config. In your example, "Name".

How to show server side validations errors on asp.net mvc using Ajax

I know that this is a very common question but I can't find any one that solve my problem.
I am using Asp.net mvc5. I am making an Ajax call using the helpers that provide asp. The code in the template looks like this.
#using (Ajax.BeginForm("Register", "Account",null , new AjaxOptions
{
HttpMethod = "POST",
Url = "/Account/Register/",
OnSuccess = "onSuccess"
}))
{
<p>#Html.ValidationMessage("Register.Email")</p>
#Html.TextBox("Email", null, new { placeholder = "Enter your email")
<input type="submit" value="submit" />
}
My problem here is that I want to show the validations errors that come from the server using the ajax callback, without re-rendering the page.
Now my question is. How must I write the action on the controller to handle this problem automatically? By automatically I mean what is the way to return something on the controller action that populates the error fields when the model is not valid.
Any help will be appreciated, thanks.

If you add the model state errors as a key value pair in your controller you can use the below method to display them.
JavaScript
This finds all the validation message spans with model state error keys and adds the red error message to them.
Please note you may want to adapt this to display many error messages against a key.
public doValidation(e)
{
if (e.data != null) {
$.each(e.data, function (key, value) {
$errorSpan = $("span[data-valmsg-for='" + key + "']");
$errorSpan.html("<span style='color:red'>" + value + "</span>");
$errorSpan.show();
});
}
}
View
Add the OnFailure parameter that points to the newly created doValidation javascript method. The argument e is automatically passed across from the json result.
This doValidation can be called from within any of your javascript methods, so you may want to call it from onSuccess too.
{
HttpMethod = "POST",
Url = "/Account/Register/",
OnSuccess = "onSuccess",
OnFailure = "doValidation"
}

Running count of assigned tasks

I am working on an MVC EF site that has a SQL DB with two tables:
Entries, Members.
Moderators of the site can assign tasks to Members which will be logged in Entries.
I'm trying to determine a way to prioritize the Members list so that the Member with the least amount of tasks (as an always-incrementing number) will always OrderBy from the top so that the Moderators can assign based on who has taken the least amount of tasks.
I explored doing this in the DB itself: I can create a View that will check the Entries against the names on Members and provide a total of how many tasks they have been assigned. However; EF/dbContext doesn't work with SQL Views apparently.
I have an EntryController which feeds the Entries Table into the View and a MemberController which simply lists the members. My next thought is to simply call an action in the MemberController that increments a specific Member's count number when called. I'm not sure if this is the best way to do this or how I can even call both the Input-Submit POST from the Html.BeginForm and the Increment function at the same time.
The BeginForm is on a strongly-typed view of the EntryController so I'm also not sure how I could pass a Member back to the member controller so instead I made the function to identify the member based on a string grab .first and increment:
public void incrementCount(string member)
{
Member[] members = null;
members[0] = (repository.Members.Where(p => p.Name == member).First());
members[0].Count = members[0].Count + 1;
}
I am completely lost at this point so any suggestions would be greatly appreciated.

Sounds to me that you're lost on all 3: EF, ASP.NET MVC and Linq.
IMHO you should send a HTTP POST or a HTTP PATCH (depends on both context & interpretation) request with jQuery (or other) back to your server/controller which will then increment the task count for the member.
Your controller would, then, have a method Increment(int memberId) with a route like [Route("/lorem/ipsum/members/increment/{id}")] so you can access it from client-side.
This is an interesting approach rather than a full form post to the server because you can send only relevant data (only the memberId instead of the whole form and receive nothing, instead of a whole new page), reducing server load and increaing performance.
Now, for the link, you can either use the regular syntax as Brendan posted ot the Linq bellow, which should be fine too:
var memberId = repository.Entries
.GroupBy(_entry => _entry.MemberId)
.Select(_group => new { Id: _group.Key, Count: _group.Count() })
.OrderBy(_group => _group.Count)
.First().Id;
Some samples to illustrate possible approaches
First, this will be our controller/method on ASP.NET MVC:
[RoutePrefix("Lorem/Ipsum/Task")]
public class LoremController : Controller
{
[Route("Increment"), HttpPost]
public JsonResult Increment(int id)
{
try
{
// Increment your task count!
return Json(new { Success = true, ErrorMessage = "" });
}
catch(Exception err)
{
return Json(new { Success = false, ErrorMessage = err.Message });
}
}
}
Sample with jQuery
<div class="blabla">
<button id="btnIncrement" class="btn btn-primary" type="button" data-member-id="1">
Increment!
</button>
</div>
<script>
$("#btnIncrement").on("click", function() {
var _this = $(this);
$.ajax({
url: "/lorem/ipsum/task/increment",
data: { MemberId: _this.data("member-id") },
method: "POST",
success: function(json) {
if (json.Success) alert ('Success!');
else alert(json.ErrorMessage);
},
error: function () { alert("error!); }
});
});
</script>
Sample using a simple form (non-jquery/javascript)
<form action="/lorem/ipsum/task/increment" method="POST">
<input type="hidden" name="MemberId" value="1" />
<button type="submit" class="btn btn-primary">Increment!</button>
</form>
Sample with Angular.JS
<div ng-app>
<button ng-controller="lalaController" ng-click="increment(1)" class="btn btn-primary" type="button>
Increment!
</button>
</div>
<script>
angular.controller("lalaController", ["$scope", "$http", function($scope, $http) {
$scope.increment = function(id) {
$http({ url: "/lorem/ipsum/task/increment", data: { MemberId: id }, method: POST })
.success(function(json) {
if (json.Success) alert ("Success!");
else alert(json.ErrorMessage);
})
.error(function() { alert("Error!"); });
}
}]);
</script>
Sure sounds much more interesting on going with pure HTML.
But now, try to disable that button unless it's a prime number. It will be impossible with pure HTML. Also, try to validate your input or parse the response (let's say: udpate your grid on the page with a JSON array of new values)...

You can do this via Linq:
var query = from e in repository.Entries
group e by e.MemberId into g
select new
{
name = g.Key,
count = g.Count()
};
Will return a list of member id's along with the number of Entry records they have.

html form posting to mvc controller

I am trying to set up a simple login html page, whose action is sent to mvc controller on another of my sites. I have no problem setting up the page to do the post, and in the mvc controller I have my method that reads the form post. The problem is that I am not seeing my fields from the html form in the form collection.
Is there something special that I need to do to read a form post within a mvc controller method, if so what is that?
The is the form action markup from my page
<form action="http://reconciliation-local.sidw.com/login/launch" method="post">
User Name <input type="text" id="username"/><br/>
Password <input type="text" id="password"/>
<input type="submit" value="launch"/>
</form>
The controller method
[HttpPost]
public ActionResult launch(FormCollection fc)
{
foreach (string fd in fc)
{
ViewData[fd] = fc[fd];
}
return View();
}
When I step through the controller method code, I am not seeing anything in the formcollection parameter.

Post Html To MVC Controller
Create HTML page with form (don't forget to reference a Jquery.js)
<form id="myform" action="rec/recieveData" method="post">
User Name <input type="text" id="username" name="UserName" /><br />
Password <input type="text" id="password" name="Password"/>
<input type="submit" id="btn1" value="send" />
</form>
<script>
$(document).ready(function () {
//get button by ID
$('#btn1').submit(function () {
//call a function with parameters
$.ajax({
url: 'rec/recieveData', //(rec)= Controller's-name
//(recieveData) = Action's method name
type: 'POST',
timeout: '12000', (optional 12 seconds)
datatype: 'text',
data: {
//Get the input from Document Object Model
//by their ID
username: myform.username.value,
password: myform.password.value,
}
});
});
});
</script>
Then in The MVC Controller
controller/action
| |
1. Create Controller named rec (rec/recieveData)
Create View named rec.cshtml
Here is the controller:
public class recController : Controller
{
// GET: rec
string firstname = "";
string lastname = "";
List<string> myList = new List<string>();
public ActionResult recieveData(FormCollection fc)
{
//Recieve a posted form's values from parameter fc
firstname = fc[0].ToString(); //user
lastname = fc[1].ToString(); //pass
//optional: add these values to List
myList.Add(firstname);
myList.Add(lastname);
//Importan:
//These 2 values will be return with the below view
//using ViewData[""]object...
ViewData["Username"] = myList[0];
ViewData["Password"] = myList[1];
//let's Invoke view named rec.cshtml
// Optionaly we will pass myList to the view
// as object-model parameter, it will still work without it thought
return View("rec",myList);
}
}
Here is the View:
#{
ViewBag.Title = "rec";
}
<h2>Hello from server</h2>
<div>
#ViewData["Username"]<br /> <!--will display a username-->
#ViewData["Password"] <!-- will display a password-->
</div>

If you posted some code it would be much easier to help you, so please edit your question...
Make sure that your form's action has the correct address, that your method is specifying POST (method="POST") and that the input fields under your form have name attributes specified.
On the server side, try making your only parameter a FormCollection and test that the fields in your form posted through the debugger. Perhaps your model binding isn't correct and the FormCollection will at least show you what got posted, if anything.
These are just common issues I've seen. Your problem could be different, but we need to see what you're working with to be able to tell.

Try something like this:
cQuery _aRec = new cQuery();
_aRec.Sqlstring = "SELECT * FROM Admins";
DataSet aDS = _aRec.SelectStatement();
DataTable aDT = aDS.Tables[0];
foreach (DataRow aDR in aDT.Rows){
if (txtAdminUsername.Text == aDR[0].ToString()){
if (txtAdminPassword.Text == aDR[1].ToString()){
Session["adminId"] = aDR[0];
Response.Redirect("Admin.aspx");
return;
}
}
}

Make sure that your FormCollection object properties for username and password are defined properly.

I had to use the name attribute on the text tag, and that solved my problem, is now working like a charm.

You have to use Ajax to do that.. Whenever you want to "submit" from client side, you should use Ajax to update the server
Step 1 - you redirect your Ajax call to your action, but with your list of parameters in the query-string appended
$.ajax(url: url + "?" + your_query_string_parameter_list_you_want_to_pass)
Step 2 - add optional parameters to your Controller-action with the same names and types you expect to get returned by the client
public ActionResult MyControllerAjaxResponseMethod(type1 para1 = null,
type2 para2 = null,
type3 para3 = null, ..)
Know that the optional parameters have to be initialized, otherwise the Action itself will always ask for those
Here's where the "magic" happens though --> MVC will automatically convert the query-string parameters into your optional controller-parameters if they match by name
I was also looking for a good answer for this, --> i.e. - one that doesn't use q-s for that usage, but couldn't find one..
Kinda makes sense you can't do it in any other way except by the url though..

Asp.net MVC populate a list box with JQuery?

I have a list of Payees in a drop down box on my form. I would like to populate a different drop down, based on the selected item of the Payee drop down, without post backs and all that.
So, I created a method in my controller that does the work:
private JsonResult GetCategories(int payeeId)
{
List<CategoryDto> cats = Services.CategoryServices.GetCategoriesByPayeeId(payeeId);
List<SelectListItem> items = new List<SelectListItem>();
foreach(var cat in cats)
{
items.Add(new SelectListItem {Text = cat.Description, Value = cat.CategoryId.ToString()});
}
return Json(items);
}
Now, I am unsure what to add to my view to get this to work.
At the moment, all I have is this:
<% using (Html.BeginForm())
{%>
<p>
<%=Html.DropDownList("SelectedAccountId", Model.Accounts, "Select One..", null) %>
</p>
<p>
<%=Html.DropDownList("SelectedPayeeId", Model.Payees, "Select One...", null) %>
</p>
<input type="submit" value="Save" />
<%
}%>
they populate fine... so when the user selects the SelectedPayeeId drop down, it should then populate a new (Yet to be created?) drop down which holds categories, based on the SelectedPayeeId.
So, I think I need to create a JQuery function (Never done JQuery.. so not even sure where it goes) which monitors the Payee drop down for an onChange event? And then call the method I created above. Does this sound right, and if so, can you guide me in how to achieve this?

Your reasoning so far is totally sound. First you are going to want to include the jquery library in your View / Master. You can download a copy of jquery from http://jquery.com/. Add the file to you project and include a <script src="/path/to/jquery.js"> to the <head> of your document. You are going to want to add another dropdown to your View (and probably another property to your model). We'll call this 'SelectedCategoryId:'
<%=Html.DropDownList("SelectedCategoryId", null, "Select One...", new { style = "display:none;"}) %>
We've set the style of this Drop Down to not be visible initially because there is nothing to select inside of it. We'll show it later after we generate some content for it. Now, somewhere on your page you will want to include a <script> block that will look something like this:
$(document).ready(function() { $('#SelectedPayeeId').change(function() {
$.ajax({
type: 'POST',
url: urlToYourControllerAction,
data: { payeeId: $(this).val() },
success: function(data) {
var markup = '';
for (var x = 0; x < data.length; x++ ) {
markup += '<option value="' + data[x].Value + '">'+data[x].Text+'</option>';
}
$('#SelectedCategoryId').html(markup).show();
}
}); }); });
This code binds the anonymous function written above to the DOM element with the ID of 'SelectedPayeeId' (in this case your dropdown). The function performs an AJAX call to the url of your method. When it receives the results of the request (your JSON you returned) we iterate over the array and build a string of the html we want to inject into our document. Finally we insert the html into the 'SelectedCategoryId' element, and change the style of the element so it is visible to the user.
Note that I haven't run this code, but it should be (almost) what you need. jQuery's documentation is available at http://docs.jquery.com/Main_Page and the functions I used above are referenced here:
.ready()
.change()
jQuery.ajax()
.html()
.show()

You'd need to make the GetCategories as a public method as it would correspond to an action handler in your controller.
Your jquery code can look like:
<script type="text/javascript">
$(function() {
$('#SelectedPayeeId').change(function() {
$.get('<%= Url.Action("GetCategories", "YourControllerName") %>',
{payeeId: $(this).val()},
function(data) {
populateSelectWith($("#Category"), data);
});
});
//Place populateSelectWith method here
});
</script>
The populateSelectWith can fill your dropdown with data like:
function populateSelectWith($select, data) {
$select.html('');
$select.append($('<option></option>').val('').html("MYDEFAULT VALUE"));
for (var index = 0; index < data.length; index++) {
var option = data[index];
$select.append($('<option></option>').html(option));
}
}
I have not tested this code, but I am hoping it runs okay.
You can find syntax for the jquery ajax get here
Since you are not posting any data to the server, you can might as well decorate your controller action with a [HttpGet] attribute