Posts

Showing posts with the label Html Helpers

Donate

Add Glyphicon To Ajax.ActionLink() In ASP.NET MVC

Image
Good evening! Adding a Bootstrap glyphicon to Ajax.ActionLink() helper is similar with Html.ActionLink() except that when the linkText parameter of the helper is empty, it will cause an Ajax issue and an Internal Server Error will be thrown from the browser. If you're going to integrate glyphicons on Ajax.ActionLink() helper and exclude the linkText property, supply that parameter with space instead of empty string so as not to cause jQuery or Ajax issues. @Ajax.ActionLink( " " , "DeleteComment" , "Home" , new { id = comment.CommentID }, new AjaxOptions { OnBegin = "return confirm('Are you sure you want to delete this comment?');" , InsertionMode = InsertionMode.Replace, UpdateTargetId = "event-details-" + Model.Id, HttpMethod = "GET" , }, new { @class = "commentDelete glyphicon glyphicon-trash" }); linkText i

Add Glyphicon To Html.ActionLink() In ASP.NET MVC

Image
Hello, Here's how to integrate glyphicon to Html.ActionLink() helper in ASP.NET MVC. The code below will display the glyphicon shopping cart right after the text Checkout of the anchor element. @Html.ActionLink( "Checkout" , "Index" , "Home" , null , new { @class = "btn btn-info glyphicon glyphicon-shopping-cart" }) In order to add the glyphicon before the text of the anchor element, use @Url.Action() instead. <a href= "@Url.Action(" Index ", " Checkout ")" class= "btn btn-info" > <span class= "glyphicon glyphicon-shopping-cart" ></span>Checkout </a> Output:

Ajax.ActionLink() Not Redirecting To ActionResult With Ajax Attribute

Given that I have this code in my .cshtml page using Ajax.ActionLink() that calls a controller method using Ajax request: @Ajax.ActionLink( "Select" , "TaskListing" , new { id = item.TaskID }, new AjaxOptions (){ HttpMethod = "GET" , UpdateTargetId = "taskListing" , InsertionMode = InsertionMode.Replace }) And the controller method called by the Ajax ActionLink is decorated with Ajax attribute. [HttpGet] [AjaxOnly(true)] [ActionName("TaskListing")] public ActionResult TaskListing_Ajax ( int id = - 1 ) { var projects = projRep.GetAllProjects(); var model = new TaskAndTaskViewModel(); model.Task = te.Tasks.FirstOrDefault(t => t.TaskID == id); model.SelectList = from p in projRep.GetAllProjects() select new SelectListItem { Selected = (p.ProjectID == Convert.ToInt32(model.Task.ProjectID)), Text = p.ProjectName.ToString(), Value = p.ProjectID.ToString()

Set An Html.RadioButtonFor() Helper As Default Checked In ASP.NET MVC

Good day! Given that you have to set a radio button as default checked in razor view, a code to do that is presented below using conditional ternary operator. However, there is an issue with the code shown below. Even if you set the checked property with empty string, it will still render as checked during run-time. @foreach ( var answer in item.Answers) { <p> @Html.RadioButtonFor(m => answer.ID, true , new { @disabled = "true" , @Name = item.ID, @checked = (answer.IsCorrect) ? "checked" : "" })@answer.AnswerText </p> } To ignore that issue, there are several ways to fix that. First one is to use if statement in the view itself . @foreach ( var answer in item.Answers) { <p> @if (answer.IsCorrectAnswer) { @Html.RadioButtonFor(m => answer.ID, true , new { @disabled = "true" , @Name = item.ID, @checked = "true" })@a

$.validator.unobtrusive.adapters.addBool() Not Working In ASP.NET MVC 5 CheckBoxFor()

Image
Hello, I was testing the addBool() method of jQuery validation to a CheckBoxFor() which will prevent the form from submitting if the checkbox is unchecked. To my surprise, the JavaScript code below doesn't work. @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/jqueryval") <script type= "text/javascript" language= "javascript" > (function ($) { $.validator.addMethod('checkboxrequired', function (value, elem) { var $elem = $(elem); if ($elem.prop('type') == 'checkbox') { if (!$elem.prop('checked')) { return false; } } return true; }); $.validator.unobtrusive.adapters.addBool('checkboxrequired', 'required'); }(jQuery)); </script> After series of investigation, I disc

@Html.EnumDropDownListFor() Helper With Html Attributes In ASP.NET MVC

Hello, I did some research on how to use enums as model for DropDownListFor() for a current application and will format it with Bootstrap classes. For ASP.NET MVC 4, it does not have that kind of helper yet. Luckily, I found an article here Creating a DropDownList helper for enums which supports enums as data source. However, it does not have an argument where in you can pass a boostrap class such as form-control. To achieve the desired output, all you need to do is modify the helper and add another parameter for html attributes which will then be used by the DropDownListFor(). public static MvcHtmlString EnumDropDownListFor<TModel, TEnum>( this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TEnum>> expression, object htmlAttributes) { ModelMetadata metadata = ModelMetadata.FromLambdaExpression(expression, htmlHelper.ViewData); IEnumerable<TEnum> values = Enum.GetValues( typeof (TEnum)).Cast<TEnum>(); IEnumerable<SelectListIte

Model Binding With ASP.NET MVC @Html.ListBoxFor()

Image
Hi, In this tutorial, I will present three ways on model binding with the @Html.ListBoxFor() helper using a ViewModel class and a simple model class. The Index view below has three @Html.ListBoxFor() controls inside a form that will be populated with different ways using MultiSelectList class, List<SelectListItem> , and IEnumerable<CountryInfo> . @using (Html.BeginForm("Index", "Home", FormMethod.Post)) { <div class= "form-group" > <div class= "form-group" > @Html.ListBoxFor(x => x.SelectedPhoneNumbers, Model.phoneNumbers, new { @class = "form-control " }) </div> <div class= "form-group" > @Html.ListBoxFor(x => x.SelectedItemIds, Model.Items, new { @class = "form-control " }) </div> <div class= "form-group" > @Html.ListBoxFor(x => x.Country.SelectedCountry, new MultiSelectList(Model.Country.Countries, "Code", "T

ASP.NET MVC ListBoxFor() With Optgroup Tag Support

Image
Here's a simple ListBoxFor helper that supports optgroup tag. See versions for C# and VB.NET. C# Code 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 public static class HtmlExtensions { public static IHtmlString ListBoxFor<TModel, TProperty>( this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression, Dictionary< string , IEnumerable<SelectListItem>> selectList, object htmlAttributes = null ) { var select = new TagBuilder( "select" ); select .Attributes.Add( "name" , ExpressionHelper.GetExpressionText(expression)); if (htmlAttributes != null ) { RouteValueDictionary routeValues = new RouteValueDictionary(htmlAttributes); if (!routeValues.ContainsKey(( "size" ).ToLower(

Display Images in ASP.NET MVC Using Custom HtmlHelper

Image
Here's a simple Image Helper for showing known image types. I've tested this for old format such as bitmaps and images with OLE headers. This helper sets the image width and height with fixed values. You may change it dynamically or update this helper to accept parameters for width and height. C# Code 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 /// <summary> /// Helper for showing images /// </summary> public static MvcHtmlString ImageLink( this HtmlHelper htmlHelper, byte [] photo, string id) { string imageSrc = null ; if (photo != null ) { using(MemoryStream ms = new MemoryStream()) { string imageBase64 = string .Empty; Image xImage = (Bitmap)(( new ImageConverter()).ConvertFrom(photo)); if (ImageFormat.Bmp.Equals(xImage.RawFormat)) { // strip out 78 byte OLE header (don't need to do this for normal images) ms.Write(photo, 78, photo.Length - 78); } else { ms.Write(photo, 0, photo.Length);

Donate