.NET MVC Razor View: conditionally including razor command - asp.net-mvc

I have this editorTemplate:
#model MyNamespace.Models.SomeModel
#using HtmlHelpers.BeginCollectionItem
<div>
#using (Html.BeginCollectionItem("someProperty")) {
<div class="form-group">
#Html.LabelFor(m => m.field1, new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#Html.PasswordFor(m => m.field1, new { #class = "form-control" })
</div>
</div>
//more content here
}
</div>
I need to conditionally include the #using (Html.BeginCollectionItem("someProperty")) {} part depending on a value of the ViewBag.
Is this possible?

Yes, it's possible
You need to include the using in # {/// using - without # }
example :
#{
if(ViewBag.x==x){
using (Html.BeginCollectionItem("someProperty")) {}
}else{
}
}

Related

ASP.Net MVC: Partial view not rendering

i am bit new in asp.net mvc. i am facing problem for very basic things that my Partial view not rendering. here is the details
i have a main page and one partial view
main page action look like
public ActionResult Index()
{
return View();
}
main index view look like
#model Testing.Models.Employee
#{
ViewBag.Title = "Home Page";
}
<div class="row">
</div>
<div class="row">
<div id="formsIndex">
#{
Html.Partial("_TestForm");
}
</div>
</div>
#section scripts {
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
}
here i am showing a partial view like this way Html.Partial("_TestForm"); but no UI comes for partial view.
partial view code look like
#model Testing.Models.Employee
#using (Ajax.BeginForm("Index", "Home", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "formsIndex" }))
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(model => model.Name, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Name, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Name, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.City, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.City, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.City, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Address, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Address, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Address, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" class="btn btn-primary" />
</div>
</div>
</div>
}
when i pass model to partial view this way Html.Partial("_TestForm", Model); then also no UI comes.
please tell me where i made the mistake ?
use in method return PartialView() and try this
#Html.Partial("_TestForm");
Using Html.Partial inside a #{ ... } block will just call the method and throw the result away.
You should call it outside of a #{ ... } block, prefixed with #, and remember to pass in the model:
<div id="formsIndex">
#Html.Partial("_TestForm", Model);
</div>
Render like this
#Html.Action("_Partialview", "controllerName")
also create action methode of partial view
public ActionResult _Partialview
{
Employee _objModel= new Employee ()
return PartialView(_objModel);
}

ASP.NET MVC - A potentially dangerous Request.Form value was detected from the client

Am trying to click save button to update what I have in text editor using ckeditor but I got this error
A potentially dangerous Request.Form value was detected from the client (OPTION_VALUE="Welcome to the Na...").
The controller is shown below
Controller
public ActionResult EditRegistrationGuideline(long id)
{
OPTIONS options = _optionsService.GetOption(id);
return View(options);
}
//
// POST: /Product/Edit/5
[HttpPost]
public ActionResult EditRegistrationGuideline(long id, OPTIONS options)
{
try
{
// TODO: Add update logic here
if (ModelState.IsValid)
{
options.OPTION_ID = id;
options.ACTION_STATUS = 0;
options.CREATED_DATE = DateTime.Now;
_optionsService.AddOption(options);
return RedirectToAction("Index");
}
}
catch
{
//return View();
ModelState.AddModelError("", "We cannot edit this Option. Verify your data entries !");
}
return View();
}
and the view is here
View
#{
//ViewBag.Title = "CreateRegistrationGuideline";
}
<div class="content-header clearfix">
<h1 class="pull-left">
<i class="fa fa-plus"> </i> Edit Registration Guideline
</h1>
<div class="col-xs-3 pull-right">
<input type="button" class="btn btn-block btn-warning" value="Back" onclick="location.href='#Url.Action("IndexRegistrationGuideline", "Options")'" />
</div>
<div class=" box box-body box-primary">
#using (Html.BeginForm("EditRegistrationGuideline", "Options", FormMethod.Post, new { #class = "form-horizontal", #enctype = "multipart/form-data" }))
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
#*<h4>OPTIONS</h4>
<hr />*#
#*#Html.ValidationSummary(true)*#
#Html.ValidationSummary(false, null, new { #class = "text-danger" })
<div class="row .col">
<div style="margin-top:20px" class="mainbox col-md-12 col-md-offset-0 col-sm-8 col-sm-offset-2">
<div class="panel panel-info">
<div class="panel-heading">
<div class="panel-title">Edit Option</div>
</div>
<div class="panel-body">
#*<div class="form-group">
#Html.LabelFor(model => model.OPTION_NAME, new { #class = "control-label col-md-2" })
<div class="col-md-10">*#
#*#Html.LabelFor(model => model.OPTION_NAME, new { #class = "control-label col-md-2" })
<div class="col-md-10">*#
#*#Html.EditorFor(model => model.OPTION_NAME)*#
#*#Html.HiddenFor(model => model.faculty_activation_date, new { #Value = System.DateTime.Now })*#
#Html.HiddenFor(model => model.OPTION_NAME)
#Html.ValidationMessageFor(model => model.OPTION_NAME)
<div class="form-group">
#*#Html.LabelFor(model => model.OPTION_VALUE, new { #class = "control-label col-md-2" })*#
<div class="col-md-10">
#Html.LabelFor(model => model.OPTION_VALUE, "Option Value")
#*<textarea class="form-control" placeholder="Enter Option Value" name="OPTION_VALUE" id="editor1"></textarea>*#
#Html.TextAreaFor(model => model.OPTION_VALUE, new { #class = "form-control", #id = "editor1" })
#Html.ValidationMessageFor(model => model.OPTION_VALUE, "", new { #class = "text-danger" })
</div>
</div>
#*<div>
#Html.LabelFor(model => model.OPTION_VALUE, "Option Value")
#Html.TextAreaFor(model => model.OPTION_VALUE, new { #type = "textarea", #id="editor1", #class = "form-control", #placeholder = "Enter Option Value", #autocomplete = "on" })
#Html.ValidationMessageFor(model => model.OPTION_VALUE, null, new { #class = "text-danger" })
</div>*#
#*<div class="form-group">
#Html.LabelFor(model => model.ACTION_STATUS, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.ACTION_STATUS)
#Html.ValidationMessageFor(model => model.ACTION_STATUS)
</div>
</div>*#
</div>
<div class="panel-footer">
<div class="panel-title">
<div class="form-actions no-color">
<input type="submit" value="Save" class="btn btn-success" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
}
#*<div>
#Html.ActionLink("Back to List", "Index")
</div>*#
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
<script src="~/Scripts/jquery-3.1.1.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="https://cdn.ckeditor.com/4.5.7/standard/ckeditor.js"></script>
<script>
$(function () {
CKEDITOR.replace('editor1');
});
</script>
}
Please what do I do.
I use CKEDITOR
XSS error ("A potentially dangerous Request.Form value was detected from the client(...)").
Solution:
[ValidateInput(false)]
Differnce b/w them
AllowHtml:
The AllowHtml attribute can be applied to a Model property and it will disable the validation by ASP.Net MVC only for that particular property
Advantages
The AllowHtml attribute is developed for Model class.
The Scope is limited to specific property of the Model class.
It is the safe and recommended solution.
ValidateInput
The ValidateInput attribute can be applied to a Controller’s Action method and it will disable the validation by ASP.Net MVC only for that particular Action method.
Advantages
The Scope is limited to specific Action method of the Controller class.
If you have multiple properties accepting HTML content, then this method will reduce redundancy.
When Model class is not used for designing Form elements then this attribute is needed.For complete details Link
Just place ValidateInput(false) attribute on controller's action.
[HttpPost]
[ValidateInput(false)]
public ActionResult EditRegistrationGuideline(long id, OPTIONS options)
The other option is to place [AllowHtml] attribute on Model Property, have a look on SO post to get difference between them
ValidateInput(false) vs AllowHtml
I was experiencing a similar issue with the following error message A potentially dangerous Request.Form value was detected from the client.
As an alternative to the previous answers, I found encoding the value passed back to the controller worked. CKEditor allows you to do this by setting the config config.htmlEncodeOutput = true;.
The documentation for this can be found at: https://docs-old.ckeditor.com/ckeditor_api/symbols/CKEDITOR.config.html#.htmlEncodeOutput
I got this error while testing XSS on my site.
This is a very good feature that the model gives us that prevents XSS, CSRF from penetrating your site.
Do not disable it as much as possible.

Refresh DIV using partial view in MVC5

I am trying to refresh a div based on the dropdown selection. I have a main view which uses a partial view (_Module). The main view has a dropdown; upon selecting the dropdown I am trying to change the content in the partial view which in turn would be reflected on the main view.
The main view:
#model Test.Models.CreateDirectoryModel
#{
ViewBag.Title = "CreateAdmin";
}
#using (Html.BeginForm("CreateAdmin", "RDBWeb", FormMethod.Post))
{
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#ProductType").change(function () {
var catType = $(this).val();
$("#result").load('#(Url.Action("GetPPOFlag", "RDBWeb", null, Request.Url.Scheme))?catType=' + catType);
});
});
</script>
#Html.ValidationSummary(true)
<div class="form-horizontal">
<h4>Create a New Directory</h4>
<hr />
<div class="form-group">
#Html.LabelFor(model => model.DirectoryNumber, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.DirectoryNumber)
#Html.ValidationMessageFor(model => model.DirectoryNumber)
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.ProductType, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownListFor(model => model.ProductType, new SelectList(Model.ProductType), "Select Product")
#Html.ValidationMessageFor(model => model.ProductType)
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.DirectoryName, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.DirectoryName)
#Html.ValidationMessageFor(model => model.DirectoryName)
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.AdminName, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownListFor(model => model.AdminName, ViewBag.Drop as SelectList, "Select Admin")
#Html.ValidationMessageFor(model => model.AdminName)
</div>
</div>
<div id="result">
#if(Model.Module != null)
{
{Html.RenderPartial("_Module", Model.Module);}
}
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
<div>
</div>
</div>
}
The partial view is:
#model Test.Models.CreateDirectoryModel
#foreach (string s in Model.Module)
{
#Html.LabelFor(a => s.ToString());
}
The methods relevant for these in the controller are:
public ActionResult GetPPOFlag(string catType)
{
ProdTypeModel p1 = new ProdTypeModel();
int flag = p1.GetPPOFlag(catType);
return RedirectToAction("GetModule", new { flag = flag });
}
[HttpGet]
public ActionResult GetModule(int flag)
{
ModuleType m1 = new ModuleType();
List<string> moduleList= m1.GetModules(flag);
return PartialView("_Module", moduleList);
}
My problem is that by default the Partial view object is null initially as the dropdown value is yet to be chosen. I added a check to render the partial view only if the object is not null; but that does not load the new values into the partial view. All I see is that the GetModule method is invoked and the partial view method is called as well, but there is no change in the div on the main page nor the partial view.
try to do like this, just keep an empty div inside in the main view like this
<div id="result">
</div>
On dropdown selection change, give a ajax call and get partial view and render html in the div
$('#result').empty();
$("#result").html(data);

How do I post varied length list to controller?

MVC4. I have a dynamic list on a view, a new textbox is added with button click (which adds a partialView) so user can enter a list of stuff. That is contained in a form element with a submit button.
In the controller I have tried three different types:
[HttpPost]
public ActionResult Index(IEnumerable<AccessoryVM> form)
{
-- form is NULL
[HttpPost]
public ActionResult Index(AccessoryVM form)
{
-- form has only the first item in the list
[HttpPost]
public ActionResult Index(FormCollection form)
{
-- seems to receive the list, but having trouble getting the values
All the examples I have seen are using a for list to add an index to each item, but they aren't using a dynamic list (it has a fixed length).
What should the Controller receiving type be?
EDIT to add more detail:
Button click appends partial view:
$("#add-item").on("click", function () {
$.ajax({
url: '/Accessory/AddItem',
cache: false,
success: function (html) {
$("#form-body").append(html);
}
})
return false;
})
Partial View:
#model EmployeeHardwareRequest.Models.ViewModels.AccessoryVM
<div class="form-group col-md-3">
#Html.LabelFor(model => model.ItemDescription, htmlAttributes: new { #class = "control-label" })
<div>
#Html.DropDownListFor(model => model.AccessoryId, Model.AccessoryDdl, new { #class = "form-control" })
</div>
</div>
<div class="form-group col-md-9">
#Html.LabelFor(model => model.ProductLink, htmlAttributes: new { #class = "control-label" })
<div>
#Html.EditorFor(model => model.ProductLink, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.ProductLink, "", new { #class = "text-danger" })
</div>
</div>
Main View - partial is appended to the #form-body:
#using (Html.BeginForm("Index", "Accessory", FormMethod.Post, new { #id="accessory-form", #class = "form-horizontal" }))
{
#Html.AntiForgeryToken()
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div id="form-body">
<div class="form-group col-md-3">
#Html.LabelFor(model => model.ItemDescription, htmlAttributes: new { #class = "control-label" })
<div>
#Html.DropDownListFor(model => model.SelectedAccessory, Model.AccessoryDdl, new { #class = "form-control" })
</div>
</div>
<div class="form-group col-md-9">
#Html.LabelFor(model => model.ProductLink, htmlAttributes: new { #class = "control-label" })
<div>
#Html.EditorFor(model => model.ProductLink, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.ProductLink, "", new { #class = "text-danger" })
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<button id="add-item" class="btn btn-primary">Add Another Item</button>
</div>
<div class="col-md-6">
<input type="submit" value="Select Software" class="btn btn-default pull-right" />
</div>
</div>
}
Most likely, you have a binding issue. Assuming all you're posting is a collection of AccessoryVM, then the parameter should be List<AccessoryVM> form. However, in order for the modelbinder properly bind the posted values, your input names must be in a specific format, namely either form[N].Foo or just [N].Foo.
You haven't given any detail about what's going on in your view, but since these are dynamically added, you must be using JavaScript to add additional inputs to the page. If you're doing it via AJAX (returning a partial view), you'll need to pass the index to your endpoint so that it can be utilized to generate the right input names. If you're using something like Knockout, Angular, etc., you should ensure that whatever template is being used to generate the inputs takes an index into account.

</br> tag not working in MVC view

Not sure if this is a MVC or Razor problem. But I can't put a line break in my view. This is the code on the index.cshtml
#using (Html.BeginForm("Create", "Vacant", FormMethod.Post, new { role = "form" }))
{
#Html.AntiForgeryToken()
#Html.ValidationSummary("", new { #class = "text-danger" })
<!--TITLE-->
<div class="form-group">
#Html.LabelFor(m => m.Title, new { #class = "col-md-3 control-label" })
<div class="col-md-12">
#Html.TextBoxFor(m => m.Title, new { #class = "form-control" })
</div>
</div>
<!--DESCRIPTION-->
<div class="form-group">
#Html.LabelFor(m => m.Description, new { #class = "col-md-3 control-label" })
<div class="col-md-10">
#Html.TextAreaFor(m => m.Description, new { #class = "form-control" })
</div>
</div>
<br /> ----> HERE
<!--TABS-->
<div class="form-group">
<div class="col-md-10">
As you can see I put the line break tag before to displayed the third field (Project) in my View.
The View is displayed without any error. However, the line break is not rendered between the 2nd and 3rd fields. Causing those two fields one after another with any space on them.
This is the screenshot
How could I put a line break between those two fields? Is there any #Html helper or Razor code to do that?
Thanks!
Try this
<div style="clear:both;margin-bottom:20px">
<!--TABS-->
<div class="form-group">
You can insert one more Div Between them.
OR
You can decorate the TAB Div with some STYLE like-
<div class="form-group" style="margin-top:20px">
OR
You can insert one more <P /> Between them.

Resources