I can't succeed to hook an #Url.Action on the onshown event of a tab in one of my view (I want to change a property of my ViewModel on every new tab selection). Is there any trouble with this?
<div id="my-tab-content" class="tab-content" >
#foreach (var item in Model.LesCategories)
{
<div id="tabs-#item.Id" class=" tab-pane #item.ClasseActive" onshown="location.href ='#Url.Action("ChangeAction","Plat")'">
<table>
#foreach (var plat in Model.LesPlats)
{
if (plat.Category.Id == item.Id)
{
<tr>
<td>
#Html.DisplayFor(platItem => plat.Nom)
</td>
<td>
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Action <span class="caret">
</span></a>
<ul class="dropdown-menu">
<li>Modifier</li>
<li>Détails</li>
<li>Supprimer</li>
<li>Descendre</li>
<li>Monter</li>
</ul>
</div>
</td>
</tr>
}
}
</table>
<div class="espace_bas">
</div>
</div>
You cannot bind onshown event like that. You have to capture tab container with jQuery and bind it with on option like shown in the docs:
$('.tab').on('shown', function (e) {
location.href ='#Url.Action("ChangeAction","Plat")';
})
Related
I'm trying to get to grips with ViewComponents but having trouble trying to get the ViewComponent to reload on a button click. Whats the correct way to handle this?
Initially on the page loading it looks OK like this
In my controller I have
public IActionResult ReloadViewComponent(int characterRegionId, int materialTypeId)
{
return ViewComponent("MarketOrderComponent", new { characterRegionId, materialTypeId});
}
and in my razor view I'm passing parameters to the ReloadViewComponent method
<td><button class="btn btn-sm btn-outline-primary" value="#material.MaterialTypeID" onclick="location.href='#Url.Action("ReloadViewComponent", "BlueprintBreakdown", new { Model.CharacterRegionId, material.MaterialTypeID })'">View</button></td>
full razor view
<body>
<div class="row" style="margin-top:5px;">
<div class="col-lg-4 col-md-12">
<div class="card" style="margin-bottom:0; ">
<div class="header" style="margin-bottom:55px;">
<h2 class="text-primary">Blueprint Breakdown</h2>
</div>
<div class="body">
<div>
<h5 class="text-center">#Model.BlueprintName</h5>
</div>
<div class="row text-center">
<div class="col-6 border-right pb-4 pt-4" style="padding-top:0px !important; padding-bottom:0px !important;">
<img src="#Model.ImageUrl" alt="#Model.BlueprintName">
</div>
<div class="col-6 pb-4 pt-4" style="padding-top:0px !important; padding-bottom:0px !important;">
<img src="#Model.ProductImageUrl" alt="#Model.BlueprintName">
</div>
</div>
<div class="text-center" style="margin-top:5px;">
<text style="font-size:small;">Material Quantity Based on Manufacturing Efficiency</text>
<br />
<text style="font-size:small;">Price Based on Lowest Region Market Sell Orders</text>
<br />
<text style="font-size:small;">Current Region is <span class="text-green">#Model.CharacterRegionName</span></text>
</div>
</div>
</div>
<div class="table-responsive">
<table class="table table-hover table-custom spacing5">
<thead>
<tr>
<th></th>
<th>Material</th>
<th>Quantity</th>
<th>Price</th>
<th>Market</th>
</tr>
</thead>
<tbody>
#foreach (var material in Model.RequiredMaterials)
{
<tr class="text-cente" style="font-size:small;">
<td><img src="#(String.Format("{0}{1}{2}", "https://imageserver.eveonline.com/Type/", material.MaterialTypeID, "_32.png"))" /></td>
<td>#material.TypeName</td>
<td>#material.Quantity</td>
<td>#material.MaterialCost</td>
<td><button class="btn btn-sm btn-outline-primary" value="#material.MaterialTypeID" onclick="location.href='#Url.Action("ReloadViewComponent", "BlueprintBreakdown", new { Model.CharacterRegionId, material.MaterialTypeID })'">View</button></td>
</tr>
}
</tbody>
</table>
</div>
</div>
<div class="col-lg-8 col-md-12">
#await Component.InvokeAsync("MarketOrderComponent", new { Model.CharacterRegionId, Model.RequiredMaterials.First().MaterialTypeID })
</div>
</div>
but when clicking the view button to reload the ViewComponent it is rendered like this.
Note by using the ViewComponent() controller method, your client only gets the component part of the view. So instead of changing the browser's current location, you should send an ajax request and dynamically replace the right side content.
Add an id='MarketOrderComponent'attribute so that we can reference this element later:
<div id='MarketOrderComponent' class="col-lg-8 col-md-12">
#await Component.InvokeAsync("MarketOrderComponent", new { Model.CharacterRegionId, Model.RequiredMaterials.First().MaterialTypeID })
</div>
And change the button click event handler to send an ajax request. For example, in order to reload the market order component, you can change your code as below:
<script>
function reload(url){
return $.ajax({
method:"get",
url:url,
success:function(resp){ $('#MarketOrderComponent').html(resp);},
});
}
</script>
<div class="card" style="margin-bottom:0; ">
...
</div>
<div class="table-responsive">
...
<tbody>
#foreach (var material in Model.RequiredMaterials)
{
<tr class="text-cente" style="font-size:small;">
<td><img src="#(String.Format("{0}{1}{2}", "https://imageserver.eveonline.com/Type/", material.MaterialTypeID, "_32.png"))" /></td>
<td>#material.TypeName</td>
<td>#material.Quantity</td>
<td>#material.MaterialCost</td>
<td>
<button class="btn btn-sm btn-outline-primary"
value="#material.MaterialTypeID"
onclick="var link='#Url.Action("ReloadViewComponent", "BlueprintBreakdown", new { Model.CharacterRegionId, material.MaterialTypeID })'; event.preventDefault(); reload(link)"
>
View
</button>
</td>
</tr>
}
</tbody>
...
</div>
<div id='MarketOrderComponent' class="col-lg-8 col-md-12">
#await Component.InvokeAsync("MarketOrderComponent", new { Model.CharacterRegionId, Model.RequiredMaterials.First().MaterialTypeID })
</div>
the list of sectors that time I click on the tab menu gives an error partial view.
tab menu
<div class="wizard-navigation">
<ul>
<li>
Sektör
</li>
</ul>
</div>
<div class="tab-pane" id="sektor">
#Html.Partial("~/Areas/CRMWeb/Views/Sektor/PartialView/_SektorListesi.cshtml")
</div>
_SektorListesi.cshtml
#model IEnumerable<CRM.Entity.Entities.Sektor>
<div class="card">
<div class="card-header card-header-text" data-background-color="rose">
<h4 class="card-title">Sektör Listesi</h4>
</div>
<div class="card-content">
<div class="toolbar">
</div>
<div class="material-datatables">
<table id="datatables" class="table table-striped table-no-bordered
table-hover" cellspacing="0" width="100%" style="width:100%">
<thead>
<tr>
<th>Sektör Adı</th>
<th>Tarih</th>
<th class="disabled-sorting text-right">İşlemler</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr id="s_#item.sektorid">
<td>#item.sektoradi</td>
<td>#item.aczaman</td>
<td class="text-right">
<a class="btnEdit btn btn-success"
href="#Url.Action("SektorDuzenle", "Sektor", new { id =
item.sektorid })">
<i class="material-icons">edit</i>
<div class="ripple-container"></div>
</a>
<a href="#" class="btnSil btn btn-danger btn-
round" onclick="SektorSil(#item.sektorid)">
<i class="material-icons">close</i>
<div class="ripple-container"></div>
</a>
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
ERROR > _SektorList.jpeg
Why a controller does not fall when the _sektorlist... I know I need to work on the controller to pull the data from the list of sectors, but how do I do it?
You actually need to call Html.RenderAction or Html.Action and specify there which action and controller to be called which in return will give the partial view back and will be rendered on the main view.
Try the following:
#Html.Action("SektorListesi"ControllerName")
which will call the controller action and will render the Partial view in the Main View.
and your action should be returning PartialView:
public ActionResult SektorListesi()
{
// your code here
return View("_SektorListesi",result.resultList.ResultProcess);
}
I guess you need something like this:
View:
#{ Html.RenderAction("SektorListesi"); }
Controller:
[ChildActionOnly]
public ActionResult SektorListesi() {
...
result.resultList = sektorRep.List();
return PartialView(result.resultList.ResultProcess);
}
Notice using RenderAction html helper and returning PartialView in controller action.
Also I think your partial view should be here: "~/Areas/CRMWeb/Views/Sektor/_SektorListesi.cshtml"
I have created a simple crud operation for testing the bootstrap modal. I am trying to open my other views in bootstrap modal. But only the first row details is opening for edit operation. I mean the edit form is opening only for the first id. Then the modal is not working anymore.
Here is my Index Page-
#model IEnumerable<AMSTest.Models.tbl_category>
....
<a id="btnCreate" data-toggle="modal" href="#myModal" class="btn btn-primary">Create</a>
<table class="table table-hover">
<tr>
<th>#Html.DisplayNameFor(model => model.category_name)</th>
<th>#Html.DisplayNameFor(model => model.category_image)</th>
<th></th>
</tr>
#foreach (var item in Model) {
<tr>
<td>#Html.DisplayFor(modelItem => item.category_name)</td>
<td>#Html.DisplayFor(modelItem => item.category_image)</td>
<td>
<a id="btnEdit" data-id="#item.category_id" data-toggle="modal" class="btn btn-primary" href="#myModal">Edit</a>
#Html.ActionLink("Details", "Details", new { id=item.category_id }) |
#Html.ActionLink("Delete", "Delete", new { id=item.category_id })
</td>
</tr>
}
</table>
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledBy="myLargeModalLabel">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<div id="modal-content"></div>
</div>
</div>
</div>
</div>
#section scripts{
<script>
$('#btnCreate').click(function (eve) {
$('#modal-content').load("/Category/Create");
});
$('#btnEdit').click(function (eve) {
$('#modal-content').load("/Category/Edit/" + $(this).data("id"));
});
$('#btnDetails').click(function (eve) {
$('#modal-content').load("/Category/Details/" + $(this).data("id"));
});
$('#btnDelete').click(function (eve) {
$('#modal-content').load("/Category/Delete/" + $(this).data("id"));
});
</script>
}
Now what should I do?
I have a page ("mypage.cshtml") and two partial view page ( partial1.cshtml, partial2.cshtml )
when Im in mypage click a button and display a modal which call partial1 with #Html.Partial("patial1") in a modal(bootstrap modal). it consist of html. when I a click a button on this modal it calls another modal consist of partial2..
Here is the issue; When I load the page begining (in mypage ) I need to get the value of checkbox that standing in second modal, that is partial2.
During I view this modal I can get this value with this:
$("input[type='checkbox'][id='4']").val();
it gives me the value which I expect but at the begining(in mypage.cshtml) this returns "undefined" :S
I couldnt understand this stuation both of these modal located in mypage but why I cant get these elements values untill I reach them ?
here is view mypage:
<div id="stack1" class="modal fade" tabindex="-1" data-width="400">
<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">#Model.Kurulus.TESIS_ADI</h4>
</div>
<div class="modal-body">
<form id="formKaydet" method="post" action="../KurulusBilgileri/KurulusBilgileriniGuncelle">
<div class="row">
<div class="col-md-12">
#Html.Partial("KurulusBilgileriniGuncelle", Model)
</div>
<div class="modal-footer">
<input type="hidden" name="SANAYI_TIPI" id="input_id" />
<input type="hidden" name="SANAYI_TIPI_DIGER" id="input_sanayitipi" />
<button type="button" data-dismiss="modal" class="btn default">Geri</button>
<a class="btn orange" onclick="sanayitipleriKaydet()">Kaydet A</a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div id="stack2" class="modal fade" tabindex="-1">
<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">#Model.Kurulus.TESIS_ADI</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
#Html.Partial("SanayiTipiSecim", Model.SanayitipiModel)
</div>
</div>
</div>
<div class="modal-footer">
#*<button type="button" data-dismiss="modal" class="btn">Close</button>
<button type="button" class="btn yellow">Ok</button>*#
</div>
</div>
</div>
</div>
and my second modal (SanayiTipiSecim)
<table class="table-full-width">
<thead>
<tr>
<th></th>
<th><strong>Sanayici Tipi</strong></th>
<th><strong>Açıklama</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" name="SANAYI_TIPI" onclick="javascript:sanayitipiTotextarea(1)" id="1" value="Boya Sanayi">
</td>
<td>
Boya Sanayi
</td>
<td>
Boya üretimi yapan imalathaneler
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="SANAYI_TIPI" onclick="javascript:sanayitipiTotextarea(2)" id="2" value="Enerji üretimi ve dağıtımı">
</td>
<td>
Enerji üretimi ve dağıtımı
</td>
<td>
Ör. Enerji üretim merkezleri, enerji ara istasyonları vb?
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="SANAYI_TIPI" id="3" onclick="javascript:sanayitipiTotextarea(3)" value="Elektrik ve Elektronik Mühendisliği">
</td>
<td>
Elektrik ve Elektronik Mühendisliği
</td>
<td>
Elektronik parçaların üretimi vb?
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="SANAYI_TIPI" id="4" onclick="javascript:sanayitipiTotextarea(4)" value="Genel Mühendislik, imalat ve montaj">
</td>
<td>
Genel Mühendislik, imalat ve montaj
</td>
<td>
Herhangi bir mühendislik aktivitesi, üretim veya montaj vb?
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="SANAYI_TIPI" id="5" onclick="javascript:sanayitipiTotextarea(5)" value="Gıda ve içecek">
</td>
<td>
Gıda ve içecek
</td>
<td>
Gıda, alkollü içki vb?
</td>
script blocks in first page:
<script src="~/Scripts/js/kurulusbilgileri.js"></script>
<script>
sanayitipleriKaydet = function () {
debugger
var data = new Object()
data.ISIM = $("input[name='ISIM']").val();
data.ADRES_METIN = $("input[name='ADRES_METIN']").val();
data.TELEFON = $("input[name='TELEFON']").val();
data.FAKS = $("input[name='FAKS']").val();
data.E_POSTA = $("input[name='E_POSTA']").val();
data.SORUMLU_ISIM = $("input[name='SORUMLU_ISIM']").val();
data.SORUMLU_SOYISIM = $("input[name='SORUMLU_SOYISIM']").val();
data.FAALIYET_ALANI = $("input[name='FAALIYET_ALANI']").val();
data.CEVRE_BILGI = $("input[name='CEVRE_BILGI']").val();
data.BELEDIYE_MUCAVIR_ALAN = $("input[name='BELEDIYE_MUCAVIR_ALAN']:checked").val();
debugger
data.OSB_YERLESIK = $("input[name='OSB_YERLESIK']:checked").val();
data.KIYI_TESISI = $("input[name='KIYI_TESISI']:checked").val();
data.VERSIYON = $("input[name='VERSIYON']:checked").val();
data.SANAYI_TIPI = window.localStorage.getItem("sanayitipiid");
window.localStorage.removeItem("sanayitipiid");
debugger
var jsondata = JSON.stringify(data);
$.ajax({
type: "POST",
contentType: 'application/json',
url: "/KurulusBilgileri/KurulusBilgileriniGuncelle",
data: jsondata,
success: function (result) {
debugger
var jsondata = JSON.parse(result)
if (jsondata.Passed) {
debugger
$('#tdISIM').empty();
$('#tdISIM').append(data.ISIM);
$('#tdADRES_METIN').empty();
$('#tdADRES_METIN').append(jsondata.data.ADRES_METIN);
$('#tdTELEFON').empty();
$('#tdTELEFON').append(jsondata.data.TELEFON);
$('#tdFAKS').empty();
$('#tdFAKS').append(jsondata.data.FAKS);
$('#tdE_POSTA').empty();
$('#tdE_POSTA').append(jsondata.data.E_POSTA);
$('#tdSORUMLU_ISIM').empty();
$('#tdSORUMLU_ISIM').append(jsondata.data.SORUMLU_ISIM);
$('#tdSANAYI_TIPI > #tdtxtSANAYI_TIPI').empty();
$('#tdSANAYI_TIPI > #tdtxtSANAYI_TIPI').append(jsondata.data.SANAYI_TIPI);//sanayitipi id si...
$('#tdFAALIYET_ALANI > #tdtxtFAALIYET_ALANI').empty();
$('#tdFAALIYET_ALANI > #tdtxtFAALIYET_ALANI').append(jsondata.data.FAALIYET_ALANI);
$('#tdCEVRE_BILGI > #tdtxtCEVRE_BILGI').empty();
$('#tdCEVRE_BILGI > #tdtxtCEVRE_BILGI').append(jsondata.data.CEVRE_BILGI);
debugger
if (jsondata.data.BELEDIYE_MUCAVIR_ALAN == "1") {
$("#tdBELEDIYE_MUCAVIR_ALAN > input[name='radioBelediyeMucavirAlan']").prop('checked', true);
}
else
$("#tdBELEDIYE_MUCAVIR_ALAN > input[name='radioBelediyeMucavirAlan']").prop('checked',false);
if (jsondata.data.OSB_YERLESIK == "1") {
$("#tdOSB_YERLESIK > input[name='radioOsbYerlesik']").prop('checked', true);
}
else
$("#tdOSB_YERLESIK > input[name='radioOsbYerlesik']").prop('checked',false);
if (jsondata.data.KIYI_TESISI == "1") {
$("#tdKIYI_TESISI > input[name='radioKiyiTesisi']").prop('checked', true);
}
else
$("#tdKIYI_TESISI > input[name='radioKiyiTesisi']").prop('checked',false);
if (jsondata.data.VERSIYON == "1") {
$("#tdVERSIYON > input[name='radioVersion']").prop('checked', true);
}
else
$("#tdVERSIYON > input[name='radioVersion']").prop('checked',false);
}
},
error: function () {
alert("ajax process in error");
}
});
}
</script>
kurulusbilgileri.js:
$(function () {
$("#btnSanayiTipiKaydet").on('click', sanayitipleriKaydet)
});
sanayiTipiTextGetir = function (id)
{
var text = $('input[id=' + id + ']').val();
debugger;
return text;
}
sanayitipilistesinigoster = function () {
$("#stack2").show();
}
sanayitipiTotextarea = function (id) {
$("#divSanayiTipi").show(600, null);
var sanayitipi = $("#" + id).val();
window.localStorage.setItem("sanayitipiid", id);
$("#input_sanayitipi").val(sanayitipi);
$("#input_id").val(id);
$("#stack2").modal('toggle');
}
Since you load your partial trough a modal, I'm assuming that the actual loading is done using AJAX. This means that when you first load your HTML page (the initial one), the partial is not yet part of the DOM (might have not been requested from the server). This in turn means that you checkbox is also not part of the DOM, and therefore is returned as undefined.
I have jQuery UI Tabs page:
<div class="addTheatreContainer">
<div class="addTheatreHeader">
<span class="txtLightboxTitle">ADD THEATRE</span>
</div><!--end/ .addTheatreHeader-->
<!-- Tabs -->
<div id="tabs">
<ul>
<li>
1 B.C.
</li>
<li>
2 Alberta
</li>
</ul>
<div id="#tabs-1">
<table class="table5">
<tr>
<td width="20">
<fieldset class="checkboxes">
<label class="label_check">
<input name="ctl10" type="checkbox" />
</label>
</fieldset>
</td>
<td width="40">ID</td>
<td width="120">Location</td>
<td width="120">Region</td>
<td width="120">City</td>
<td width="70">Province</td>
</tr>
</table>
</div>
<div id="#tabs-2">
<table class="table5">
<tr>
<td width="20"><fieldset class="checkboxes"><label class="label_check"><input name="ctl22" type="checkbox" /></label></fieldset></td>
<td width="40">ID</td>
<td width="120">Location</td>
<td width="120">Region</td>
<td width="120">City</td>
<td width="70">Province</td>
</tr>
</table>
</div>
</div><!--end/ #tabs-->
<div class="ButtonAlignRight">
<button id="btnAddAndCloseTheatre" runat="server" class="btnAddandCloseTheatre" >Add & Close</button>
<button id="btnAddTheatre" runat="server" class="btnAddTheatre" onclick="AddLocations()">Add</button>
<button id="btnClose" runat="server" class="btnClose">Close</button>
</div>
</div>
When I click the Add button. The whole page refreshes and I dont want it to since I am storing values in a global variable.
JS:
function AddLocations()
{
var allChecboxes = $("#tabs").tabs("options", "active").find(".checkboxes");
var allCheckedLocations = allChecboxes.find(".cbLocation").each(function () {
var checkbox = $(this);
if (checkbox.prop("checked") == true)
{
var checkboxId = checkbox.attr("id");
var locationId = parseInt(checkboxId.replace("cbLocation_", ""));
if (typeof (locationId) == "number" && isNaN(locationId) == false) {
AddedLocationsList.push(locationId);
}
//checkbox.parents(".row").fadeOut();
}
});
}
AddedLocationsList is a global variable.This function works perfectly but since the page is refreshed the variable is set back to []. I don't know why the page is being refreshed. Is there a jQuery UI callback?