I have a list of table for survey form and each one of them have a button/asp-action to view the answers of at least 3 competitors. but I need to select the competitors of a survey form using a modal. inside that modal, I should populate the body with a checkbox of competitors who answered that survey form. How can I push through to direct the data-toggle modal to the controller?
Here is my View:
#for (int i = 0; i < Model.SurveyNames.Count; i++)
{
<tr>
<td>
#Model.SurveyNames[i].SurveyName
</td>
<td>
#Model.SurveyNames[i].SurveyFor
</td>
<td>
#Model.SurveyNames[i].Description
</td>
<td>
#Model.SurveyNames[i].CreatedBy
</td>
<td>
#Model.SurveyNames[i].Status
</td>
<td>
<!-- Button trigger modal -->
<a asp-action="ViewCompetitors" asp-route-id="#Model.SurveyNames[i].Id" data-toggle="modal" data-target="#ChooseCompetitors">View Competitors</a>
</td>
</tr>
}
And this is my Controller, it should return the values to index modal:
public IActionResult Index(int? id)
{
var model = new CompetitorAnswerViewModel();
var SurveyList = _context.MainSurvey.ToList();
foreach (var zsurvey in SurveyList)
{
model.SurveyNames.Add(new survey { Id = zsurvey.Id, SurveyName = zsurvey.SurveyName, SurveyFor = zsurvey.SurveyFor,Description = zsurvey.Description,CreatedBy = zsurvey.CreatedBy,Status = zsurvey.Status}) ;
}
var competitorList = _context.SurveyCompetitor.ToList().Where(x => x.MainSurveyId == id);
foreach (var competitors in competitorList)
{
model.CompetitorNames.Add(new Competitor { CompetitorName = competitors.CompetitorName});
}
return View(model);
}
I should populate the body with a checkbox of competitors who answered that survey form. But it doesn't forward to the controller whenever I click "View Competitors".
I want the table data id to pass it to the contoller to filter the survey competitors and then return the filtered data to the modal in the same index
You could put the Competitors view in a partial view and render it to Index view using ajax.
1.Create the partial view in Shared folder /Views/Shared/_CompetitorsPartialView.cshtml
#model YourViewModel
<div class="col-md-12">
Your View
</div>
2. Return the filtered data to this partail view
public IActionResult ViewCompetitors(int id)
{
// filter logic
return PartialView("_CompetitorsPartialView",YourViewModel);
}
3.Use ajax in Index view.
Modify <a> to <button>:
<button id = "ViewCompetitors" onclick="viewCompetitor(#item.CustomerId)">View Competitors</button>
Modal and ajax:
<div class="modal fade" id="ChooseCompetitors" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal Header</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div id="showresults"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
#section Scripts{
<script>
function viewCompetitor(id) {
$.ajax({
type: 'Get',
url: '/Home/ViewCompetitors/' + id,//your url
success: function (result) {
$("#ChooseCompetitors").modal();//open modal
$('#showresults').html(result);//populate view to modal
}
})
}
</script>
}
Related
I have a search bar in my website, but if the searched word is not valid than I do an if statement to redirect user to home page:
if (jsonResponse is null)
{
return RedirectToAction("Index", "Home");
}
I would like that my site redirect to home page after this check on my controller and than show a pop-up in home page saying "You searched for an invalid word"
You could try this way,
Search Page Controller
public IActionResult SearchPage()
{
var data = TempData["serachResultFromDb"];
if (data != null)
{
ViewData["serachResultFromDb"] = JsonConvert.DeserializeObject<List<PrinterJob>>(TempData["serachResultFromDb"].ToString());
}
return View();
}
Search Page Chtml
#using Newtonsoft.Json.Linq
#using msPartnerSupport.Models
#{
ViewData["Title"] = "Search Page";
}
<h2>#ViewData["Title"]</h2>
#using (Html.BeginForm("SearchKey", "Home", FormMethod.Post))
{
<div>
<table class="table-bordered ">
<tr>
<td><strong>Search</strong></td>
<td>
<input type="text" name="searchkey" placeholder="Enter Search Key" />
</td>
<td>
<input type="submit" value="Search" />
</td>
<td></td>
</tr>
</table>
</div>
<br />
}
<table class="table-bordered ">
<tr>
<th>Printer Name </th>
<th>Total</th>
</tr>
#{
var searkeyResult = (List<PrinterJob>)ViewData["serachResultFromDb"];
if (searkeyResult != null)
{
foreach (var item in searkeyResult)
{
<tr>
<td><strong> #item.PrinterName</strong></td>
<td><strong> #item.TotalPrint</strong></td>
</tr>
}
}
}
</table>
Output should be like :
SearchKey Controller
[HttpPost]
public IActionResult SearchKey(string searchkey)
{
//Searching From Database
List<PrinterJob> serachingFromDb = _context.PrinterJobs.Where(skey => skey.PrinterName == searchkey).ToList();
//If no search Result then redirecting to new page
if (serachingFromDb.Count == 0)
{
return RedirectToAction("About");
}
//On successful search result
TempData["serachResultFromDb"] = JsonConvert.SerializeObject(serachingFromDb);
return RedirectToAction("Index");
}
Note: I am testing on Home controller so directly redirecting to Index action. This controller has no view page.
Index Controller
public IActionResult Index()
{
ViewData["Message"] = "You searched for an invalid word";
return View();
}
Note: It will be redirected when there will be no search result.
Index Chtml
#{
ViewData["Title"] = "Index";
}
<div class="container">
<div class="modal fade" id="samplePopup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"> </h4>
</div>
<div class="modal-body">
#ViewData["Message"]
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$(function () {
$('#samplePopup').modal('show');
});
});
</script>
Pop Up When No Search Results:
Hope it will help you. Let me know if you have any more concern.
Ok So this works fine in a view model but when i move it out to a view component it doesnt.
#foreach (var notes in Model) {
<tr>
<td>#notes.LastModifedDate</td>
<td>#notes.LastModifiedBy</td>
<td>#notes.Notes </td>
<td>
<a class="btn btn-app">
<i class="fas fa-edit"></i> Edit
</a>
|<p>#notes.Id</p> <i class="glyphicon glyphicon-trash"></i>Delete
</td>
</tr>
}
This is my Model in the same view component
<div id="deleteLink" class="modal fade" role="dialog">
<div class="modal-dialog">
#using (Html.BeginForm("DeleteNotes", "MISObjects", FormMethod.Post)) {
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Delete Record!</h4>
</div>
<div class="modal-body">
Are you sure you wish to delete this record ?.
<!--this is how to pass the id through-->
<input type="text" name="linkId" id="linkId" />
</div>
<div class="modal-footer">
<button type="submit" id="btnSubmit" class="btn btn-danger"
onclick="$('#testForm').submit()">
Yes
</button>
<button class="btn btn-warning" data-dismiss="modal">No</button>
</div>
</div>
}
</div>
</div>
Here I am telling it to attach the notes Id here but for some reason its not finding the text field the notes id is being passed through the data-id="#notes.Id" of the button above.
#section Scripts
{
<script>
function deleteModal(id) {
alert(id);
$("#linkId").val(id);
}
function EditModal(id) {
$("#editMode").val(id);
}
</script>
}
I am getting the following error I presume this will be something to do with jquery not ready at this point.
Here is a worked demo to use view component:
TestViewComponent.cshtml:
#{
ViewData["Title"] = "TestViewComponent";
}
<h1>TestViewComponent</h1>
<div>
#await Component.InvokeAsync("Notes", new List<notes> { new notes { Id = "1", Notes = "note1", LastModifedDate = "2020/01/01", LastModifiedBy = "Joy" }, new notes { Id = "2", Notes = "note2" }, new notes { Id = "3", Notes = "note3" } })
</div>
#section Scripts
{
<script>
function deleteModal(id) {
alert(id);
$("#linkId").val(id);
}
function EditModal(id) {
$("#editMode").val(id);
}
</script>
}
Shared/Components/Notes/Default.cshtml:
#model IEnumerable<notes>
#foreach (var notes in Model)
{
<tr>
<td>#notes.LastModifedDate</td>
<td>#notes.LastModifiedBy</td>
<td>#notes.Notes </td>
<td>
<a class="btn btn-app">
<i class="fas fa-edit"></i> Edit
</a>
|<p>#notes.Id</p> <i class="glyphicon glyphicon-trash"></i>Delete
</td>
</tr>
}
ViewComponents/Notes:
public class Notes:ViewComponent
{
public async Task<IViewComponentResult> InvokeAsync(List<notes> list)
{
return View(list);
}
}
Result:
You should use jquery's event binding instead of on click.
First update your anchor tag by adding additional class.
<i class="glyphicon glyphicon-trash"></i>Delete
Then ensure that the #section Scripts block is on the main view not the partial view. Then bind the class using the following
<script>
$(window).on("load", function () {
$(".delete-notes").on('click', function () {
alert($(this).attr("data-id"));
});
function EditModal(id) {
$("#editMode").val(id);
}
})
</script>
Can please someone help me here?! Thank you!
I have a view that displays a list of products along with an "Add Product" button for each. I am calling the CreateNewProduct method for each "Add Product" click to find the status of the product. Depending on the status, either I need to stay on the same view or I need to call a modal popup. I am able to do this by creating a modal popup in a different view. But I want to call the modal popup div (also pass the modal) from the same view where it displays a list of products. Is this possible?
public ActionResult CreateNewProduct(int productId)
{
var sharedProduct = _productTemplateService.GetSharedProducts(productId);
var _finalSharedProducts = (sharedProduct.Any(t => t.productId != productId));
if (_finalSharedProducts)
{
var sharedProdctTemplate = _productTemplateService.GetSharedProduct(productId);
return View("ModalView", new SharedModel
{
SharedProduct = sharedProdctTemplate
});
}
else
{
_productTemplateService.CreateNewProduct(productId);
return RedirectToAction("Details", "ProductTemplate");
}
}
Model View Code
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Shared Product</h4>
</div>
<div class="modal-body">
<div class="flex-row">
<div class="col-6">
<div class="d-flex flex-row">
<div class="p-2">Product ID</div>
<div class="p-2">Product Types</div>
<div class="p-2">Status</div>
</div>
#foreach (var productTemplate in Model.SharedProduct )
{
<div class="d-flex flex-row">
<div class="p-2">#productTemplate.ProductId</div>
<div class="p-2">#productTemplate.ProductType</div>
<div class="p-2">#productTemplate.StatusCode</div>
</div>
}
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<p>
#Html.ActionLink("Edit", "Edit", new { /* id = Model.PrimaryKey */ }) |
#Html.ActionLink("Back to List", "Index")
</p>
<script type="text/javascript">
$(document).ready(function () {
$('#myModal').modal('show');
});
</script>
UPDATE:
I made it working. This is what I did. At the end, I have mentioned issues I am facing.
Link, modal and script in my main view - Detail View (called from ProductTemplate Controller)
<td>Add New Product</td>
<div class="modal fade" id="mymodel" role="dialog" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Shared Products</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body" id="mymodelbody">
</div>
</div>
</div>
<script>
var loadModal = function (productId, customerId) {
$.ajax({
type: 'GET',
url: '/NewProductTemplate/CreateNewProduct',
cache: false,
data: {
productId: productId,
customerId: customerId
},
dataType: 'html',
success: function (data) {;
$("#mymodelbody").html(data);
$("#mymodel").modal("show");
}
});
}
</script>
NewProductTemplateController Code
public ActionResult CreateNewProduct(Guid productId, Guid customerId)
{
var sharedProduct = _productTemplateService.GetSharedProducts(productId);
var _finalSharedProducts = (sharedProduct.Any(t => t.productId != productId));
if (_finalSharedProducts)
{
var sharedProdctTemplate = _productTemplateService.GetSharedProduct(productId);
return PartialView("_shared", new SharedModel
{
SharedProduct = sharedProdctTemplate
});
}
else
{
_productTemplateService.CreateNewProduct(productId);
return RedirectToAction("Details", "ProductTemplate");
}
}
Partial view _shared.view code
#model SharedModel
#using (Html.BeginForm("ShareProduct", "NewProductTemplate", FormMethod.Post))
{
#Html.AntiForgeryToken()
<div class="flex-row">
<div class="col-6">
<div class="d-flex flex-row">
<div class="p-2">Product ID</div>
<div class="p-2">Product Types</div>
<div class="p-2">Status</div>
</div>
#for (var i = 0; i < Model.SharedProducts.Count(); i++)
{
#Html.HiddenFor(model => model.SharedProducts.ElementAt(i).ProductId)
#Html.HiddenFor(model => model.SharedProducts.ElementAt(i).CustomerId)
#Html.HiddenFor(model => model.SharedProducts.ElementAt(i).ProductType)
#Html.HiddenFor(model => model.SharedProducts.ElementAt(i).StatusCode)
#Html.HiddenFor(model => model.SharedProducts.ElementAt(i).IsShared)
<div class="d-flex flex-row">
<div class="p-2">#Html.DisplayFor(model => model.SharedProducts.ElementAt(i).ProductId)</div>
<div class="p-2">#Html.DisplayFor(model => model.SharedProducts.ElementAt(i).ProductType)</div>
<div class="p-2">#Html.DisplayFor(model => model.SharedProducts.ElementAt(i).StatusCode)</div>
#if (Model.SharedProducts.ElementAt(i).StatusCode == VersionStatus.PUBLISHED)
{
<div class="p-2">#Html.EditorFor(m => m.SharedProducts.ElementAt(i).IsShared)</div>
}
</div>
}
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" class="btn btn-sm btn-primary" />
<button type="button" class="btn btn-sm btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
PROBLEM:
1) When I save submit button in modal pop-up (partial view), it calls ShareProduct method from NewProductTemplate controller. For some reason, model SharedModel's SharedProducts property is null when it gets to controller code. Can you please help me here why it gets null?
public ActionResult ShareProduct (SharedModel shareModel)
{
//Access ShareProducts from shareModel
return RedirectToAction("Details", "ProductTemplate");
}
PROBLEM:
2) I want to load popup only if the product is shared, otherwise I just want to redirect to Detail view as mentioned in NewProductTemplate controller's CreateNewProduct method. Problem is that it loads Detail view also in popup if product is not shared since that's what my script is doing. Is there any way that I can check data in Success function before showing modal popup? If data/html contains Shared text, I would like to load the normal Detail view. I am just assuming. I tried to do so but with no success.
Detail method in ProductTemplate Controller
public ActionResult Details()
{
var productTemplate = _productTemplateService.GetAllProducts(User);
return View(new DetailsModel
{
ProductTemplate = productTemplate,
});
}
(This is for Bootstrap 3.3.7 Hopefully it's relevant for the version you're on)
I handle this by popping open the modal on the client side from my main view. The link that pops the modal contains the URL to the controller method that will render the actual contents (list of products, in your case). This controller method should return a partial view.
Modal in my main view:
<div class="modal fade name-of-my-modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content"></div>
</div>
</div>
Link in my main view:
<a class="btn btn-default btn-xs" data-toggle="modal" data-target=".name-of-my-modal" role="button" href="/SomeController/SomeMethodThatReturnsPartialView/234">Show Modal</a>
My controller method for the partial view:
public ActionResult SomeMethodThatReturnsPartialView(int id)
{
var model = GetProducts();
return PartialView("_IndexPartial", model);
}
My partial view that will populate the actual modal contents:
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Title goes here</h4>
</div>
<form class="form-horizontal" id="SomeId" name="SomeName" role="form">
<div class="modal-body">
<div>Product 1</div>
<div>Product 2</div>
<div>Product 3</div>
<div>Product 4</div>
</div>
</form>
Also, if the contents of the modal change frequently, or are variable based upon the ID you pass to the partial controller method, then you'll want to clear the modal contents when closing it. From your main view:
$(document).on('hidden.bs.modal', '.modal', function (e) {
// Handles the event thrown when a modal is hidden
$(this).removeData('bs.modal');
$(this).find(".modal-content").empty();
});
Let me know if this helps, and whether anything needs to be clarified.
Problem 2 you could return a JSON result and put the HTML in a string as shown here:
https://www.codemag.com/article/1312081/Rendering-ASP.NET-MVC-Razor-Views-to-String
you could also set a boolean on the returned JSON for whether to redirect.
If it is a redirect do that in Javascript on the success using
window.location
I have a textbox that when the user enters a string and presses a button this is then compared to find which matching fields are in database. I also have another button that launches the display of a bootstrap modal which then views the results.
The issue I'm having is I only want one button but when I try to combine the two i get the modal and the string search never happens.
Can anyone tell me how I combine the two ?
Button 1 (search string button)
#using (Html.BeginForm("Index", "Home", FormMethod.Get))
{
<p>
<label for="platform" class="control-label">Enter Code:</label><br />
#Html.TextBox("filtername")
<input type="submit" value="Filter" "/>
</p>
}
Button 2 (Activates modal but no data comparision)
<div class="form-group">
<div class="col-xs-offset-2 col-xs-10">
<div class="span7 text-center">
<input type="text" class="form-control" id="theCode" placeholder="Please Enter Code">
<input type="submit" value="Go!" class="btn btn-success" id="sendcoderequest" data-toggle="modal"
data-target="#basicModal2" />
</div>
</div>
</div>
Home/Index Method:
public ActionResult Index(string filtername)
{
var filterresults = from m in db.UserInfoes
select m;
filterresults = filterresults.Where(x => x.UserCode.ToString().Contains(filtername)).OrderBy(x => x.UserCode);
return View(filterresults);
}
Modal :
<div class="modal fade" id="basicModal2" tabindex="-1" role="dialog" aria-labelledby="basicModal" 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">Summary</h4>
</div>
<div class="modal-body">
<h2>Results</h2>
<span id="printCode"></span><br />
<div class="pull-right"><button type="submit" class="btn btn-success" id="toggle">Toggle</button> </div>
<table class="table">
<thead>
<tr>
<th></th>
<th>Date</th>
<th>Test Type</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td>
<input type="checkbox" class="checks">
</td>
<td>
#Html.DisplayFor(modelItem => item.CreationDateTime)
</td>
<td>
#Html.DisplayFor(modelItem => item.AppModeId)
</td>
</tr>
}
</tbody>
</table>
Code currently working with:
Form:
<form id="formid">
<label for="platform" class="control-label">Enter Code:</label>
<input type="text" name="filtername" />
<input type="submit" class="btn btn-success" value="Filter" />
</form>
JQuery:
$("#formid").submit(function () {
$.ajax({
url: "Home",
data: $(this).serialize()
}).done(function (response) {
$('#modal_content').html(response);
$('#basicModal2').modal('show');
});
return false; // prevent the form submission
});
Modal is unchanged.
You could use an AJAX call instead of the form submission. Then you could open the modal via Javascript once you receive the AJAX response. According to the tags, you're probably using JQuery, so it would look like this :
$("form").submit(function(){
$.ajax({
url: "Home",
data: $(this).serialize()
}).done(function(response){
// Fill your modal window with the response here
$('#basicModal2').modal('show');
});
return false; // prevent the form submission
});
Edit
You can find here an example that uses AJAX to send the filter name to the server, fill the modal with the server response and finally show the modal:
http://jsfiddle.net/yohanrobert/e3p4yv55/
Main objective:
Be able to click on a day from the calendar plugin then have a popup of a bootsrap modal with events that are listed for that day.
Whats going on:
I'm using a javascript plugin fullcalender. This plugin has a dayClick event which I am using. Once clicked I have ajax code to pass values to the post as shown:
<div id="calendar"></div>
#Html.Partial("Modal",null)
...
<script>
$(document).ready(function () {
$('#calendar').fullCalendar({
height: 170,
selectable: true,
editable: true,
defaultView: 'basicWeek',
dayClick: function (date, jsEvent, view) {
$.ajax(
{
url: '#Url.Action("Index","Home")',
type: "POST",
data: JSON.stringify({ date: date }),
dataType: "json",
contentType: "application/json; charset=utf-8",
cache: false
})
$("#myModal").modal();
}
});
});
</script>
from here it goes to the controller then forces related data to a partial view. Which by debugging I believe is doing it properly.
[HttpPost]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public ActionResult Index(string date)
{
if (date != null)
{
string[] dateSplit = date.Split(new char[] { 'T' });
DateTime objDate = Convert.ToDateTime(dateSplit[0]);
var content = db.Calendars.Where(x => x.startDate == objDate).ToList();
return PartialView("~/Views/Home/Modal.cshtml", content);
}
else
return PartialView("~/Views/Home/Modal.cshtml", null);
}
The problem:
Doesn't seem like data is being passed into the partial view, just the original null value. Thought passing data through the post of the index would populate the partial view.
Or could it be the javascript call $("#myModal").modal(); being called before data can populate? I've done some testing of throwing the if(Model != null) around all of the coding in the partial view and an else statement that would display a tag with elements in it. It always displays the tag.
Here is my View:
#model IEnumerable<webby.Models.Calendar>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="padding:20.5% 15%;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Events on #ViewBag.Date</h4>
</div>
<div class="modal-body">
<table>
#if(Model != null)
{
#foreach(var item in Model)
{
<tr>
<td>
#Html.DisplayFor(model => item.events)
</td>
</tr>
<tr>
<td>
#Html.DisplayFor(model => item.type)
</td>
</tr>
<tr>
<td>
#Html.DisplayFor(model => item.content)
</td>
</tr>
}
}
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
your call to the modal
$("#myModal").modal();
needs to be done inside a .success function not in the dayClick function. And you need to pass it the result data of your ajax call.