Let says I have a select tag with a specific id and multiples option. Then below, I want to display partial view base on the selected . I think of using something as if else statement but I don't know how to gain the value of that select with c#.
My thought about this is like this
<select id="selectItem">
<option value="A">A</option>
<option value="B">A</option>
<option value="C">A</option>
</select>
#if ('selectItem' == "A"){
<partial name="..."/>
}
you can do it with js,here is a demo:
Controller(Test):
public IActionResult Index()
{
return View();
}
public IActionResult Partial()
{
return PartialView("Partial1");
}
Partial1:
<h1>Partial1</h1>
Index.cshtml:
<select id="selectItem">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<div id="PartialContent"></div>
js:
<script>
$(function () {
getPartial();
});
$("#selectItem").change(function () {
getPartial();
});
function getPartial() {
if ($("#selectItem").val() == "C") {
$.ajax({
type: 'GET',
url: "/Test/Partial",
dataType: 'html', //dataType - html
success: function (result) {
//Create a Div around the Partial View and fill the result
$('#PartialContent').html(result);
}
});
}else {
$('#PartialContent').html("");
}
}
</script>
result:
Related
My contains 2 different objects, obj1 and obj2.
<select multiple class="full-width" style="min-height: 200px" ng-model="vm.obj1" >
<optgroup label="First obj">
<option ng-repeat="item in vm.obj1" >{{item.valeur}}</option>
</optgroup>
<optgroup label="Second obj">
<option ng-repeat="item in vm.obj2">{{item.libelle}}</option>
</optgroup>
</select>
obj1 = {[
0: {valeur: non},
1: {valeur: oui}
]}
obj2 = {[
0: {libelle: instance},
]}
What I get when I select values :
What I actually want :
I want the values to be in separated arrays since they are both from different objects so 1 array with ['oui','non'] and the second array with ['instance']. How can I do that ?
Visual of the dropdown ( sorry for the big blue lines I wanted to stay on the point with the datas I made in the question )
You can use ngChange to respond to any changes to the ngModel value and store that in a new property:
function ctrl($scope) {
$scope.options = [{
name: "A",
options: ["A1", "A2"]
},
{
name: "B",
options: ["B1", "B2"]
},
];
$scope.parseSelection = function() {
const selected = {};
// Loop over the selected options and check from which group they came
$scope.rawSelected.forEach((value) => {
$scope.options.forEach(({ name, options }) => {
if (options.includes(value)) {
// The option comes from the current group
if (!selected[name]) {
selected[name] = [];
}
selected[name].push(value);
}
});
});
$scope.selected = selected;
};
}
angular.module("app", [])
.controller("ctrl", ctrl)
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.js"></script>
<div ng-app="app" ng-controller="ctrl">
<select multiple ng-model="rawSelected" ng-change="parseSelection()">
<optgroup ng-repeat="group in options" label="group.name">
<option ng-repeat="option in group.options">{{option}}</option>
</optgroup>
</select>
{{rawSelected}} - {{selected}}
</div>
I have index.html given below
<select id="id">
<option>1</option>
<option>2</option>
</select>
document.getElementById("id").onchange = function(){
let id = this.value
google.script.run.withSuccessHandler(setData).getData(id)
}
function setData(data) {
console.log(data)
}
And code.gs given below
function getData() {
var data = cleanRange(SpreadsheetApp.getActive().getSheetByName("Продажи").getRange("A2:K2").getValues(), id)
return data
}
function cleanRange(range, id){
var filtered = range.filter(function (el) {
return el[5] === id;
});
return filtered;
}
How can i call function getData from index.html with an argument.
I did it with the following code, because I realized that the above option would not work.
Index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<select id="id>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<script>
document.getElementById("id").onchange = function(){
let id = this.value;
google.script.run.withSuccessHandler(getData).setId(id)
}
function getData(){
google.script.run.withSuccessHandler(setData).getData()
}
function setData(data){
console.log(data);
}
</script>
</body>
</html>
Code.gs
function doGet() {
return HtmlService.createHtmlOutputFromFile('Index');
}
function getData(){
var data = SpreadsheetApp.getActive().getSheetByName("Продажи").getRange("D2:K").getValues();
var id = PropertiesService.getScriptProperties().getProperty("orderNumber");
var result = cleanRange(data, id)
console.log(result)
return result;
}
function setId(id){
PropertiesService.getScriptProperties().setProperty("orderNumber", id);
}
function cleanRange(range, id){
var filtered = range.filter(function (el) {
return el[2] == id;
});
return filtered;
}
I am having issues populating the 2nd of two drop down's with data. The first drop down has me select a from a list of Sessions, every Session has ReportFiles attached to it like the model below:
export interface ExceptionReportSessionData {
SessionName: string,
ReportFiles: Array<string>
}
Based on what Session the user selects I want the 2nd drop down to fill with the ReportFiles associated with the selected Session. I have no issues getting the data for Sessions. Its the second drop down that will not return any data.
Here is what I have so far.
Component.ts:
export class OrderExceptionReportComponent implements OnInit {
public sessionData: ExceptionReportSessionData[] = [];
newData: any;
reports = [];
constructor(private orderExceptionReportService: OrderExceptionReportService) {
}
public async getExceptionReportSessionData(): Promise<void> {
return this.orderExceptionReportService.GetExceptionReportSessionData()
.then(
data => {
this.sessionData = data;
});
}
async ngOnInit() {
await this.getExceptionReportSessionData();
}
sessionDataChange(evt) {
const value = evt.target.value;
console.log(`session index: ${value}`);
console.log(this.sessionData);
if (isNaN(Number(value))) {
this.reports = [];
} else {
this.reports = this.sessionData[Number(value)].ReportFiles;
}
console.log(this.reports);
}
}
Sidenote: When I log (reports: ${this.reports}) it shows it as undefined and I cannot figure out why which is the main issue in returning the data in my second drop down
HTML:
<div class="dropdown">
<div class="input-group">
<h4>Session: </h4>
<select class="custom-select form-control-sm" id="inputGroupSelect01"
(change)="sessionDataChange($event)">
<option value="null">Select session...</option>
<option *ngFor="let session of sessionData; index as i;"
value="{{i}}">
{{session.sessionName}}
</option>
</select>
</div>
<div class="input-group">
<h4>Report Date: </h4>
<select class="custom-select form-control-sm" id="inputGroupSelect01">
<option value="">Select report date...</option>
<option *ngFor="let report of reports"
value="report">
{{report}}
</option>
</select>
</div>
<div>
<button type="button" class="btn btn-primary">Retrieve</button>
</div>
</div>
Another side note: The retrieve button will eventually be making an API call sending the data selected from the drop downs.
I'm struggling to find a second solution to how I have this implemented. First I will show you how it's implemented then explain how it needs to be changed.
html:
<div class="input-group">
<h4>Session: </h4>
<select class="custom-select form-control-sm" id="inputGroupSelect01"
(change)="sessionDataChange($event)" [(ngModel)]="sessionReportFilter.sessionName">
<option value="null">Select session...</option>
<option *ngFor="let session of sessionData; index as i;"
[value]="i">
{{session.sessionName}}
</option>
</select>
</div>
<div class="input-group">
<h4>Report Date: </h4>
<select class="custom-select form-control-sm" id="inputGroupSelect01"[(ngModel)]="sessionReportFilter.fileName">
<option value="">Select report date...</option>
<option *ngFor="let report of reports"
[value]="report">
{{report}}
</option>
</select>
</div>
<div>
<button type="button" class="btn btn-primary" (click) ="orderExceptionReportData()">Retrieve</button>
</div>
</div>
component.ts:
export class OrderExceptionReportComponent implements OnInit {
public sessionData: ExceptionReportSessionData[] = [];
public sessionReportData: ExceptionReportData;
public sessionReportFilter: ExceptionReportFilter = {
sessionName: "Washington",
fileName: "EXCEPTION20130211060056882.csv"
}
reports = [];
cols = [
{ header: 'ItemId' },
{ header: 'AltItemId' },
{ header: 'GenName' },
{ header: 'StationName' },
{ header: 'HospitalCode' },
{ header: 'Facility' },
{ header: 'Reason' }
];
constructor(private orderExceptionReportService: OrderExceptionReportService) {
}
public async getExceptionReportSessionData(): Promise<void> {
return this.orderExceptionReportService.GetExceptionReportSessionData()
.then(
data => {
this.sessionData = data;
});
}
public async orderExceptionReportData(): Promise<void> {
return this.orderExceptionReportService.OrderExceptionReport(this.sessionReportFilter)
.then(
data => {
this.sessionReportData = data;
console.log(this.sessionReportData)
});
}
async ngOnInit() {
await this.getExceptionReportSessionData();
}
sessionDataChange(evt) {
const value = evt.target.value;
if (isNaN(Number(value))) {
this.reports = [];
} else {
this.reports = this.sessionData[Number(value)].reportFiles;
}
console.log(this.reports);
}
}
Right now as you can see in my first drop down the [value] is set to i and that's so the function I have called on (change) can get the correct data show in the second drop down. Well I need [value] to be set to session.sessionName because I am using two way databinding so that when the user clicks the retrieve button the correct data is being sent to the function. How can I change the implementation so that based on which Session the user selects in the drop downs only the ReportDates associated with the Session are correct so that I can use two way data binding to make the function call on the button Retrieve?
One simple way is to update the sessionData of the report select when change event occurs on session select. You have several way of doing this I will propose you a simple one,
component.ts
sessions: ExceptionReportSessionData[] = []; // the list obtained from service
reports: string[] = []; // the reports list
sessionChange(evt) {
const value = evt.target.value;
console.log(`session index: ${value}`);
if (isNaN(Number(value))) {
this.reports = [];
} else {
this.reports = this.sessions[Number(value)].ReportFiles;
}
console.log(`reports: ${this.reports}`);
}
component.html
<div class="input-group">
<h4>Session: </h4>
<select class="custom-select form-control-sm"
(change)="sessionChange($event.target.value)">
<option value="null">Select session...</option>
<option *ngFor="let session of sessions; index as i;"
value="{{i}}">{{session.SessionName}}</option>
</select>
</div>
<div class="input-group">
<h4>Report Date: </h4>
<select class="custom-select form-control-sm">
<option value="null">Select report date...</option>
<option *ngFor="let report of reports"
value="report">{{report}}</option>
</select>
</div>
Pretty straight forward implementation of the above idea. Like I mention there are several ways to do this.
Working Blitz
Change your html to :-
<div class="input-group">
<h4>Session: </h4>
<select class="custom-select form-control-sm" id="inputGroupSelect01"
(change)="sessionDataChange($event)" [(ngModel)]="sessionReportFilter.sessionName">
<option value="null">Select session...</option>
<option *ngFor="let session of sessionData; index as i;"
[value]="session.sessionName">
{{session.sessionName}}
</option>
</select>
</div>
<div class="input-group">
<h4>Report Date: </h4>
<select class="custom-select form-control-sm" id="inputGroupSelect01"[(ngModel)]="sessionReportFilter.fileName">
<option value="">Select report date...</option>
<option *ngFor="let report of reports"
[value]="report">
{{report}}
</option>
</select>
</div>
<div>
<button type="button" class="btn btn-primary" (click) ="orderExceptionReportData()">Retrieve</button>
</div>
</div>
Change your typescript method to :-
sessionDataChange(evt) {
const sessionName= evt.target.value;
if (!sessionName || sessionName.length === 0) {
this.reports = [];
} else {
this.reports = this.sessionData.find((session) => session.sessionName === sessionName).reportFiles;
}
console.log(this.reports);
}
I have the following angular factory and controller.
var app = angular.module("carForm", []);
app.factory("dataService", ['$http', function getData($http) {
function getCars(){
return $http({
method: 'GET',
url: '/data.json'
}).then(function (response){
console.log(response.data);
return response.data
},function (error){
console.log("product error");
})
};
return { getCars : getCars }
}]);
app.controller("dataSort", ['dataService', '$scope', function(dataService, $scope) {
dataService.getCars().then(function(response){
cars = response;
$scope.make = [];
for (key in cars){
item = cars[key];
console.log(item);
$scope.make.push(item);
}
$scope.model = [];
for (key in cars[$scope.selectMake]){
item = cars[item][key_2]
$scope.model.push(item)
}
})
search = function(cars){
cars[$scope.selectMake][$scope.selectModel][$scope.selectType]
}
}]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div class="col-12" ng-contoller="dataSort">
<div class="row" style="text-align: center;">
<div class="form-group col-6">
<label for="inputState">Make</label>
<select id="inputState" class="form-control">
<option ng-model="selectMake" selected>Select make</option>
<option ng-repeat="item in make">{{ item }}</option>
</select>
</div>
<div class="form-group col-6">
<label for="inputState">Model</label>
<select id="inputState" class="form-control">
<option ng-model="selectModel" selected>Select model</option>
<option ng-repeat="item in model">{{ model }}</option>
</select>
</div>
<div class="form-group col-3">
<label for="inputState">Type</label>
<select id="inputState" class="form-control">
<option ng-model="selectType"selected>Select make type</option>
<option ng-repeat="item in type">{{ model }}</option>
</select>
</div>
</div>
</div>
I don't believe either factory or controller are running. Nothing is logged in console, neither the data or the error message. Angular is properly linked to my form as there is no {{ }} also the ng app is declared at the top of the html in the body tag using ng-app="carForm". The JS page is correctly linked to the html as when I console.log outside the angular function it prints. Angular is loaded before my JS script in the head tag, I cant figure out what I'm doing wrong.
Your factory is uncorrected, because you didn't pass your function in return
Right way to make a factory
app.factory("dataService", ['$http', function($http) {
var x = {};
return x;
}]);
But even you change the code it's not work on your controller because
you want to return response.data in $http as promise and this not happens, in
the case you need $q as injection in your service.
var app = angular.module("carForm", []);
app.factory("dataService", ['$http', '$q', function ($http, $q) {
var factory = {}
factory.sample = function() {
console.log("in factory!");
return [1,2,3]
}
factory.getCars = function() {
var deferred = $q.defer();
$http.get("api").then(function(response){
deferred.resolve(response.data);
})
return deferred.promise;
}
return factory;
}]);
app.controller("dataSort", ['dataService', '$scope', function(dataService, $scope) {
$scope.items = dataService.sample();
//uncomment when your api was ready
//dataService.getCars().then(function(response){
// console.log(response);
//})
}]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="carForm" ng-controller="dataSort">
<ul>
<li ng-repeat="item in items">{{item}}</li>
<ul>
</div>
Your factory is not correctly implemented Please change it like this.
app.factory("dataService", ['$http', function($http) {
function getCars(){
return $http({
method: 'GET',
url: '/data.json'
}).then(function (response){
console.log(response.data);
return response.data
},function (error){
console.log("product error");
})
};
return { getCars : getCars }
}]);