We Keep Coding

show an element by checking bool value from model

I want to show bootstrap badges like accepted, rejected according to a bool value from the model called status . the problem here is I tried doing it using jquery but it's either all shown or all hide. so I guess it can't read the status values. I opened developer tools and there is no error. I need guidance. I appreciate your help.
#for (int i = 0; i < Model._Requests.Count(); i++)
{
<tr>
<td>
#Html.DisplayFor(x => Model._Requests[i].Account_Name)
</td>
<td>
#Html.DisplayFor(x => Model._Requests[i].LOB)
</td>
<td>
#Html.DisplayFor(x => Model._Requests[i].Operation_Date)
</td>
<td>
#Html.DisplayFor(x => Model._Requests[i].Employee_no)
</td>
<td>
#Html.DisplayFor(x => Model._Requests[i].Fulfillment_Rate)
</td>
<td>
<span name="badge" class="badge badge-warning" id="pend">WTF</span>
</td>
<!--for the accept button-->
#using (Html.BeginForm("Add_Fulfillment_Accept", "TBL_Request", FormMethod.Post))
{
#Html.AntiForgeryToken()
<td>
<button id="btnAccept" class="btn btn-success" name="a_button" type="submit" value="true">Accept</button>
#Html.Hidden("Request_ID", Model._Requests[i].Request_ID)
#Html.Hidden("Status", Model._Requests[i].Status, new { id = "myEdit", value = "" })
</td>
}
<!--for the reject button-->
#using (Html.BeginForm("Add_Fulfillment_Reject", "TBL_Request", FormMethod.Post))
{
#Html.AntiForgeryToken()
<td>
<button id="btnReject" class="btn btn-danger" name="button" data-toggle="modal" data-target="#exampleModal" type="button" value="false">Reject</button>
#Html.Hidden("Request_ID", Model._Requests[i].Request_ID)
#Html.Hidden("Status", Model._Requests[i].Status, new { id = "myEdit", value = "" })
</td>
<!--this is the note modal of the reject button -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
#Html.TextArea("Note", Model._Requests[i].Note, htmlAttributes: new { #class = "form-control" })
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<input type="submit" value="submit" class="btn btn-success" id="finalSave" />
</div>
</div>
</div>
</div>
}
</tr>
}
</tbody>
</table>
script
var flag = $('[name = "Status"]').val();
if (flag === false) {
$('#pend').show();
}
else {
$('#pend').hide();
}
the badge i'm trying to show
<span name="badge" class="badge badge-warning" id="pend">WTF</span>

If status doesnt change afterwards, just set some class dynamically to this item in your cshtml
<span name="badge" class="badge badge-warning #{Model.Status ? "visible" : "invisible"}" id="pend">WTF</span>
If it does change you have to trigger events on that value change

I can't retrieve multiselect items checked when I open it in a modal popup MVC

I have a result table in my view and when I click in Edit button a modal popup should open with form filled fields.
The issue is that the multiselect dropdownlist doesn't bring the items selected.
When I do the same using the view (without the Modal) it works. I believe the issue is in Modal somehow.
My View with Modal is:
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<div class="row">
<div class="col-md-9">
<h3 class="modal-title" id="editTitle">Edit Effect List</h3>
</div>
<div class="col-md-1">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
</div>
<div class="modal-body">
#using (#Html.BeginForm("Submit", "EffectsList"))
{
<div class="form-group" valing="center">
<div class="row">
<div class="col-md-4">
#Html.LabelFor(m => m.UserGroupID, new { #class = "text-capitalize", style = "margin-top: 6px;" })
#Html.DropDownList("ID", (MultiSelectList)ViewBag.Categories, new { multiple = "multiple" })
</div>
</div>
</div>
}
</div>
<div class="modal-footer">
<div class="row">
<div class="col-md-2">
<button type="submit" class="btn btn-primary">Update</button>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
My Controller is like below:
public ActionResult Edit(string Project, int ID)
{
var viewModelEdit = GetEffectListData(ID);
var categories = viewModelEdit.UserGroups.Select(c => new {ID = c.ID, Groupname = c.Groupname}).ToList();
ViewBag.Categories = new MultiSelectList(categories, "ID", "Groupname", new[] { 1, 3, 7 });
return View("Edit",viewModelEdit);
}
Also in the view that I call this Action is like below:
...
<div id="modal" class="modal fade" role="dialog"/>
...
<script>
//Call for Modals
$(function () {
$(".edit").click(function () {
var id = $(this).attr("data-id");
alert(id);
$("#modal").load("Edit?Project=#Model.Project&ID=" + id, function () {
$("#modal").modal();
})
});
})
</script>
In addition to the code above I did more tests and found two ways to create the dropdown with the same list.
If you see my MultiSelectList is right. The values were properly set as selected but they are not rendering in the dropdown.

MVC Populate Textboxfor from TextBoxFor value onbuttonclick

I am kinda new to this. How do you populate a TextBoxFor with a value from a TextBoxFor on buttonclick?
I am creating a confirmation modal wherein the user input data in the TextBoxFor and when submit button is clicked, a confirmation dialog should pop-up with his credentials submitted. The problem is no value is showing in the modal TextBoxFor
Parent TextBoxFor
<div class="col-md-10">
#Html.TextBoxFor(model => model.name, new { htmlAttributes = new { #class = "form-control", #id = "name" } })
#Html.ValidationMessageFor(model => model.name, "", new { #class = "text-danger" })
</div>
<button type="button" id="submitBtn" class="btn btn-primary" data-toggle="modal" data-target="#login-modal" data-backdrop="static" data-keyboard="false">Submit</button>
Modal TextBoxFor
<div id="login-modal" tabindex="-1" role="dialog" aria-hidden="true" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
Confirm Submit
<button type="button" data-dismiss="modal" aria-hidden="true" class="close">×</button>
</div>
<div class="modal-body">
Are you sure you want to submit the following details?
<br/>
<br/>
<table class="table">
<tr>
<th>Queue Number</th>
<td>#Html.TextBoxFor(model => model.name, new {htmlAttributes = new {#class = "form-control", #id = "namee"}})</td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
Submit
</div>
}
</div>
</div>
Script
$('#submitBtn').click(function () {
$('#namee').text($('#name').val());
var x = document.getElementById("name").value;
document.getElementById("namee").innerHTML = x;
});
I also tried changing the Parent TextBoxFor with an <input type> but still doing nothing.
Thanks in advance.

autocompletebox in modal popup bootstrap

I have implemented a modal popup using bootstrap and include the jquery autocompletebox in it. However when i type something in text box, the suggestion text will appear behind the modal popup box but not 'inside' it. Is there anything i done wrong? Please advise, thanks alot!
My Razor view cshtml:
<div class="modal fade" id="impersonation" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> Impersonation</h4>
</div>
<div class="modal-body">
<div class="form-horizontal">
#Html.Label("Impersonate", htmlAttributes: new { #class = "control-label col-md-4" })
#Html.TextBox("UserName", null, htmlAttributes: new { #class = "form-control" })
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<a class="btn btn-danger btn-ok" id="impersonate" data-dismiss="modal">Start Impersonation</a>
</div>
</div>
</div>
</div>
My javascript:
$('#impersonation').on('show.bs.modal', function (e) {
$(this).find('.btn-ok').attr('href', $(e.relatedTarget).data('href'));
$(this).find('.btn-ok').attr('custom', $(e.relatedTarget).data('custom'));
});
$(document).ready(function () {
$("#UserName").autocomplete({
source: '#Url.Action("AutoCompleteUser","UserRoles")'
});
})

Found out solution by modify as below:
$(document).ready(function () {
$("#UserName").autocomplete({
source: '#Url.Action("AutoCompleteUser","UserRoles")',
appendTo: $('.modal-body')
});
})

asp.net mvc 4 registration inside bootstrap modal plugin

I am performing registration inside bootstrap 3 modal components.I create a partial view for registration and render that inside bootstrap modal. I am performing validation there also.Problem is that if I submit wrong data or empty data modal disappers on submit button click . I want that it stays there if data is not valid and show validation errors there.How I customize that?
Here is my partial view
#using (Html.BeginForm("", "", FormMethod.Post, new { #class = "form-signin" }))
{
#Html.AntiForgeryToken()
#Html.ValidationSummary()
<fieldset>
<legend class="form">Registration Form</legend>
#Html.TextBoxFor(m => m.UserName, new { #class = "form-control", placeholder = "Email Address" })
#Html.PasswordFor(m => m.Password, new { #class = "form-control", placeholder = "Password" })
#Html.PasswordFor(m => m.ConfirmPassword, new { #class = "form-control", placeholder = "Confirm Password" })
<input type="submit" value="Register" style="margin-top:10px;" class="btn btn-lg btn-primary btn-block" />
</fieldset>
}
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
and here is the modal
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Registration</h4>
</div>
<div class="modal-body">
#Html.Partial("_Register")
</div>
</div>
</div>
</div>

You have to use Ajax.BeginForm(). Here is the way how can you achieve it.
Using Ajax.BeginForm with ASP.NET MVC 3 Razor