Develop Reference

Form with multiple answers as radio buttons in mvc

I have a litle problem with mvc application. I have form, where are many questions and user have to choose one option for every answer. But when I send data to controller, data are null. Can you please help me find solution?
I have one view with form and for every question is partialview, where are stored also answers as radio buttons
main view
#using (Html.BeginForm("ConfirmTestForm", "Home", FormMethod.Post))
{
<div class="row">
<div class="col-12">
<progress id="oca-progress" class="oca-progress" max="190" value="0"></progress>
</div>
</div>
for (int i = 0; i < Model.Questions.Count; i = i + 10)
{
<div id="#($"section-{(i/10)}")" class="#(first ? "" : "oca-hidden")">
<div class="row">
<div class="col-md-8">
<h3>
Otázka
</h3>
</div>
<div class="col-md-4 text-end">
<ul class="oca-test-choices">
<li>
<div class="oca-choice-wrapper">
<span>A</span>
</div>
</li>
<li>
<div class="oca-choice-wrapper">
<span>M</span>
</div>
</li>
<li>
<div class="oca-choice-wrapper">
<span>N</span>
</div>
</li>
</ul>
</div>
</div>
<hr class="oca-hr" />
#*#for (int j = i; j < i + 10; j++)*#
#foreach (var question in Model.Questions.Skip(i).Take(10))
{
#Html.Partial("_QuestionDetail", question)
}
<div id="error-message" class="w-100 invisible oca-validation-error">
<span>Je potřeba vyplnit všechny odpovědi</span>
</div>
#if (i != Model.Questions.Count - 10)
{
<div class="row oca-row-button">
<div class="col-6 text-start">
#if (!first)
{
<input name="previous" class="oca-test-button" type="button" value="Předchozí" />
}
</div>
<div class="col-6 text-end">
<input name="next" class="oca-test-button" type="button" value="Další" />
</div>
</div>
}
else
{
<div class="row oca-row-button">
<div class="col-6 text-start">
<input name="previous" class="oca-test-button" type="button" value="Předchozí" />
</div>
<div class="col-6 text-end">
<input class="oca-test-button" type="submit" value="Další" />
</div>
</div>
}
#if (first)
{
first = false;
}
</div>
}
}
partialView with one question
<div>
<div class="row">
<div class="col-md-8">
<label>#($"{Model.Order} - {Model.Name}")</label>
</div>
<div class="col-md-4 text-end">
<ul class="oca-test-choices">
<li>
<div class="oca-choice-wrapper">
#Html.RadioButtonFor(m => m.Value, ChoiceTypes.Yes, new { #class = "oca-choice" })
#*#Html.RadioButton(Model.Order.ToString(), Model.ChoiceYes, new { #class = "oca-choice" })*#
</div>
</li>
<li>
<div class="oca-choice-wrapper">
#Html.RadioButtonFor(m => m.Value, ChoiceTypes.Maybe, new { #class = "oca-choice" })
#*#Html.RadioButton(Model.Order.ToString(), Model.ChoiceMaybe, new { #class = "oca-choice" })*#
</div>
</li>
<li>
<div class="oca-choice-wrapper">
#Html.RadioButtonFor(m => m.Value, ChoiceTypes.No, new { #class = "oca-choice" })
#*#Html.RadioButton(Model.Order.ToString(), Model.ChoiceNo, new { #class = "oca-choice" })*#
</div>
</li>
</ul>
</div>
</div>
</div>
Model
public class QuestionsViewModel
{
public List<QuestionViewModel> Questions { get; set; }
}
public class QuestionViewModel
{
public int Order { get; set; }
public string Name { get; set; }
public ChoiceTypes? Value { get; set; }
}

You can use checkbox in place of radiobutton for selecting multiple answers.
click here

Partial View Render

I am new to the world of MVC programming with C #, I already read the topic, made some examples and of course with the guide of StackOverflow I think I'm doing well.
However I find myself with an exercise that I want to perform and from which I have seen several answers but none has worked for me, and I come to you asking for the support.
Index
#{
ViewBag.Title = "Bienvenido";
}
<div class="container-fluid">
<div class="row">
<div class="col-md-3" id="menu">
<ul class="nav nav-pills nav-stacked">
<li role="presentation" class="active">Inicio</li>
<li role="presentation">Datos Generales</li>
<li role="presentation">Datos Curriculares</li>
<li role="presentation">Experiencia Laboral</li>
<li role="presentation">Datos Laborales</li>
<li role="presentation">Cónyuge y Dependientes</li>
<li role="presentation">Inmuebles</li>
<li role="presentation">Vehículos</li>
<li role="presentation">Muebles</li>
<li role="presentation">Inversiones</li>
<li role="presentation">Adeudos</li>
<li role="presentation">Posible Conflicto de Intereses</li>
<li role="presentation">Observaciones</li>
</ul>
</div>
<div class="col-md-9">
<div class="row" id="opciones">
</div>
<div class="row" id="crear">
</div>
<div class="row" id="registros">
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#dependientes').click(function () {
$.get('#Url.Action("Create","Dependientes")', function (data) {
$('#crear').replaceWith(data);
});
});
});
$(function () {
$('#dependientes').click(function () {
$.get('#Url.Action("Mostrar","Dependientes")', function (data) {
$('#registros').replaceWith(data);
});
});
});
</script>
Partial View _Mostrar
#model List<projectD.Models.dependiente>
#{
ViewBag.Title = "_Mostrar";
}
<br />
<div class="container">
<div class="row">
#foreach (var item in Model)
{
<div class="card" style="width: 20rem; display:inline-block; margin-top:10px">
<img class="card-img-top" src="~/Content/images/familia.png" alt="Card image cap" width="50" height="50">
<div class="card-block">
<h4 class="card-title">Dependiente</h4>
<p class="card-text">
#item.nombre
<br />
#item.apellidoPaterno
<br />
#item.apellidoMaterno
<br />
#item.CURP
</p>
#Html.ActionLink("Detalle", "Details", new { id = item.idDependiente }, new {#class= "btn btn-primary"})
</div>
</div>
}
</div>
</div>
I have a project with a main view, which has a menu to the left when selecting each option to the right render two partial views each with its controller the first to add records and the second to display them.
main screen
What I want to do is that when I click on add record, only the partial views are updated and the URL is not reloaded since I would lose the menu option in which I am.
I hope you can support me

pass a list of object to modal popup in ASP.net MVC

I want to pass a list of objects to modal popup which is represented as view in a separate .cshtml file
here what I did :
first, I have the following index.cshtml view:
#model E_Voucher.Models.Contract
#{
ViewBag.Title = "Details";
Layout = "~/Areas/Admin/Views/Shared/_Layout.cshtml";
}
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="portlet box blue">
<div class="portlet-title">
<div class="caption">
Contract #Html.DisplayFor(model => model.ContractId) Details
</div>
</div>
<div class="portlet-body">
<div class="tabbable-line">
<ul class="nav nav-tabs ">
<li class="active">
Info
</li>
<li>
Projects
</li>
<li>
Devices
</li>
<li>
Cards
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab_info">
#1 Tab
</div>
<div class="tab-pane" id="tab_project">
#2 Tab
</div>
<div class="tab-pane" id="tab_devices">
<div class="portlet light bordered">
<div class="portlet-title">
<div class="actions" style="padding-left:5px">
<a class="btn btn-circle btn-outline red" data-target="#AssignDeviceModal" data-toggle="modal">
<i class="fa fa-plus"></i>
<span class="hidden-sm hidden-xs">Assign Device </span>
</a>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab_cards">
#4Tab
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="AssignDeviceModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
#Html.Action("AssignDevice")
</div>
</div>
</div>
</div>
</div>
the index.cshtml view contains 4 tabs, in the device_tab there is a button which is responsible to show a modal popup contains all the available device to the user, as you can see in the div with id=AssignDeviceModal I put a #Html.Action("AssignDevice") to call the Action Method AssignDevice which fetch the devices from DB, and render the following AssignDevice.cshtml view:
#model IEnumerable<E_Voucher.Models.Device>
<div class="modal-header">
<h4 class="modal-title">Assign Device</h4>
</div>
<div class="modal-body">
#*for example print the brand of device*#
#foreach (var item in Model)
{
<li>#item.Brand</li>
}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
and here is the Action Method AssignDevice:
public ActionResult AssignDevice()
{
List<Device> _dev = new List<Device>();
Device dev1 = new Device();
dev1.Brand = "Samasung";
_dev.Add(dev1);
Device dev2 = new Device();
dev1.Brand = "SONY";
_dev.Add(dev2);
return View(_dev);
}
the problem is, when I click the button, the popup modal is shown and disappeared immediately !
how to fix this ?

MVC Partial view is not rendering when use Conditional operator (IF..ELSE)

I have some work with IF..ELSE operator in my MVC Partial View, My partial view is not rendering when i use IF..Else..Operator in it, Can anybody know how can i solve this?
OR
How can i do this in other way?
ERROR : "NetworkError: 500 Internal Server Error - http://localhost:50101/TaxRates/EditTaxRates?CountryTaxId=12"
EDIT
My model is not null, also the CountryId is Not NULL
HTML
<a onclick="editTaxRates(#item.CountryTaxId)"><span class="fa fa-2x fa-edit" style="cursor:pointer; color:black" title='Click to Edit Country'></span></a>
<form id="readIODetail" style="z-index:100">
<div id="divAddCountryRecord" class="modal hide fade " tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" style="width: 700px; left: 46% !important;">
</div>
</form>
Jquery
function editTaxRates(CountryTaxId) {
var selectedCountryType = $("#selectedCountryType").val();
$.ajax({
type: 'POST',
url: '/TaxRates/EditTaxRates?CountryTaxId=' + CountryTaxId,
success: function (response) {
$("#divAddCountryRecord").empty();
$("#divAddCountryRecord").append(response);
$('#divAddCountryRecord').modal('show');
}
})
}
Controller
public PartialViewResult EditTaxRates(int? CountryTaxId)
{
// conditional code
return PartialView(countryResult);
}
.csHtml (View)
<div class="modal-body" style="padding-left:10px;overflow-y:auto;">
<div class="row-fluid container">
<div class="span4">
</div>
<div class="row-fluid span12">
<div class="span3">
<p><strong>Country: </strong></p>
</div>
<div class="span5">
#Html.TextBoxFor(m => m.CountryName, new { #readonly = true })
</div>
</div>
<div class="row-fluid span12">
<div class="span3">
<p><strong>Tax-Rate: </strong></p>
</div>
<div class="span5">
#if (Model.CountryId == 1)
{
#Html.TextBoxFor(m => m.TaxRate, new { #id = "C_firstCountry" })
}
else
{
#Html.TextBoxFor(m => m.TaxRate, new { #id = "C_secondCountry" })
}
</div>
</div>
</div>
</div>
Your valuable feedback is appreciated.

I had a partial view in an if clause. In some circumstances it failed to render.
For some reason, changing it from
#Html.Partial()
to
#Html.RenderPartial()
fixed it.
I haven't the time nor inclination to look further into this now, but the following may explain why: Html.Partial vs Html.RenderPartial & Html.Action vs Html.RenderAction

smit
there is very little mistake in your code
you can not use (Model => Model.CountryName ....) when you are using it seperately in your if condition #if(Model.CountryId == 1)
So please replace your code to below code & it will work
<div class="modal-body" style="padding-left:10px;overflow-y:auto;">
<div class="row-fluid container">
#Html.HiddenFor(row => row.CountryTaxId)
<div class="span4">
</div>
<div class="row-fluid span12">
<div class="span3">
<p><strong>Country: </strong></p>
</div>
<div class="span5">
#Html.TextBoxFor(row => row.CountryName, new { #placeholder = "Change the Country Name", #readonly = true })
</div>
</div>
<div class="row-fluid span12">
<div class="span3">
<p><strong>Tax-Rate: </strong></p>
</div>
<div class="span5">
#if (Model.CountryId == 1)
{
#Html.TextBoxFor(row => row.TaxRate, new { #placeholder = "Change the Tax-Rate", #id = "TaxRate" })
}
</div>
</div>
</div>
</div>

Instead of writing that IF statement, why don't you use the conditional operator? Here is the MSDN page for it.
So, I would determine the ID as follow, instead of writing your IF statement:
#Html.TextBoxFor(m => m.TaxRate, new { #id = Model.CountryID == 1 ? "C_firstCountry" : "C_secondCountry" })
Since I am not sure how you load your partial view, I can only suggest this, if you partial view is a static "control/view" on your page.
#{ Html.RenderPartial("_YourPartialView", Model); }
If this PartialView gets loaded dynamically, you can have a look at using jquery and ajax.

asp.net c# sort right product under right category

I'm trying to render out my projects sorted under the right category. I have it right now so right product will go under right category but it doesn't render out the name. It renders out the object so it looks rather weird.
This is my code:
int i = 0;
var categories = ViewBag.Category as List<Category>;
var products = ViewBag.Products as List<Product>;
foreach (var cateory in categories)
{
i++;
<div class="panel-group accordion" id="accordion1">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapse_#i">
#cateory.Name
</a>
</h4>
</div>
<div id="collapse_#i" class="panel-collapse collapse">
<div class="panel-body">
<div class="col-md-12">
#cateory.Products
</div>
</div>
</div>
</div>
</div>
}
And this is the output.
System.Collections.Generic.HashSet`1[ProductCatalog.Models.Product]
I have tired this #cateory.Products.Select(n => n.Name).ToString(); but did not do much.