0
我正在開發（首次）使用ajax調用和敲除MVVM填充2個級聯下拉列表的MVC應用程序。 問題是，當我發佈網頁時，如何保留我在下拉列表中選擇的值？ 我正在開發的網頁將計算時間發佈到控制器，並且控制器必須返回計算結果。返回結果時，必須保留表單的值。如何在使用MVC和Knockout時保留表單值
視圖的一部分
@using (Html.BeginForm("Calculate", "Entypo", FormMethod.Post, new { role = "form" }))
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(false)
<fieldset>
<legend>Printers</legend>
<div class="row">
<div class="form-group col-md-6">
<select id="printers" name="printers" class="form-control" data-bind="options: printers, optionsValue: 'ID', optionsText: 'BrandModelName', value: selectedPrinter, optionsCaption: 'Choose Printer...'"></select>
</div>
<div class="form-group col-md-6">
<select id="sheets" name="sheets" class="form-control" data-bind="options: sheets, optionsValue: 'ID', optionsText: 'Description', optionsCaption: 'Choose Sheet...', enable: sheets().length, value: sheet">
</select>
</div>
</div>
</fieldset>
<div class="row">
<div class="col-md-12" style="padding-bottom:10px;">
<input type="submit" value="Calculate" class="btn btn-primary" />
</div>
</div>
}
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
<script src="~/Scripts/knockout-3.0.0.js"></script>
<script>
$(document).ready(function() {
// MVVM
viewModel = {
printer: ko.observable(),
printers: ko.observableArray(),
sheet: ko.observable(),
sheets:ko.observableArray(),
paper: ko.observable(),
papers: ko.observableArray(),
weight: ko.observable(),
weights: ko.observableArray(),
size: ko.observable(),
sizes: ko.observableArray(),
lamA: ko.observableArray(),
lamAvalue: ko.observable(),
lamB: ko.observableArray(),
lamBvalue: ko.observable(),
chkCut: ko.observable(false),
chkFold: ko.observable(false),
chkPick: ko.observable(false),
chkPerfore: ko.observable(false),
standardSize: ko.observable(),
x: ko.observable(),
y: ko.observable(),
bleed: ko.observable(2.5),
qty: ko.observable(1)
};
viewModel.standardSize.subscribe(function() {
var st = viewModel.standardSize();
var res = st.split("x");
viewModel.x(res[0]);
viewModel.y(res[1]);
});
$.ajax({
url: '/Entypo/getPrinters',
type: 'GET',
dataType: 'json',
data: {},
success: function (data) {
viewModel.printers(data);
}
});
viewModel.selectedPrinter = ko.dependentObservable({
read: viewModel.printer,
write: function (printer) {
this.printer(printer);
$.ajax({
url: '/Entypo/getSheets',
type: 'GET',
dataType: 'json',
data: { id: viewModel.selectedPrinter() },
success: function (data) {
viewModel.sheets(data);
}
});
},
owner: viewModel
});
$.ajax({
url: '/PaperSize/getPapers',
type: 'GET',
dataType: 'json',
data: {},
success: function (data) {
viewModel.papers(data);
}
});
viewModel.selectedPaper = ko.dependentObservable({
read: viewModel.paper,
write: function (paper) {
this.paper(paper);
$.ajax({
url: '/Entypo/getWeights',
type: 'GET',
dataType: 'json',
data: { id: viewModel.selectedPaper() },
success: function (data) {
viewModel.weights(data);
}
});
},
owner: viewModel
});
viewModel.selectedWeight = ko.dependentObservable({
read: viewModel.weight,
write: function (weight) {
this.weight(weight);
$.ajax({
url: '/Entypo/getSizes',
type: 'GET',
dataType: 'json',
data: { id: viewModel.selectedWeight() },
success: function (data) {
viewModel.sizes(data);
}
});
},
owner: viewModel
});
$.ajax({
url: '/Entypo/getLamination',
type: 'GET',
dataType: 'json',
data: {},
success: function (data) {
viewModel.lamA(data);
viewModel.lamB(data);
}
});
ko.applyBindings(viewModel);
});
</script>
的控制器
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using QVNet_v2.Models;
namespace QVNet_v2.Controllers
{
public class EntypoController : Controller
{
private QVNetEntities db = new QVNetEntities();
//
// Calc: /Entypo/
[HttpGet]
public ActionResult Calculate()
{
return View();
}
[HttpPost]
public ActionResult Calculate()
{
return View();
}
//GET PRINTERS
public JsonResult getPrinters()
{
var printers = db.Printers.Select(s => new { s.ID, s.BrandModelName }).OrderBy(s=>s.BrandModelName).ToList();
return Json(printers, JsonRequestBehavior.AllowGet);
}
//GET SHEETS USED FROM SELECTED PRINTER
public JsonResult getSheets(int id)
{
var sheets = db.Sheets.Select(s => new { s.ID, s.Description, s.PrinterID }).Where(s=>s.PrinterID ==id).OrderBy(s=>s.Description).ToList();
return Json(sheets, JsonRequestBehavior.AllowGet);
}
// GET PAPERS
public JsonResult getPapers()
{
var papers = db.Papers.Select(s => new { s.ID, s.Description }).OrderBy(s => s.Description).ToList();
return Json(papers, JsonRequestBehavior.AllowGet);
}
// GET WEIGHTS OF SELECTED PAPER
public JsonResult getWeights(int id)
{
var weights = db.PaperWeights.Select(s => new { s.ID, s.Weight, s.PaperID }).Where(s => s.PaperID == id).OrderBy(s => s.Weight).ToList();
return Json(weights, JsonRequestBehavior.AllowGet);
}
//GET SIZES OF SELECTED PAPER AND WEIGHT
public JsonResult getSizes(int id)
{
var sizes = db.PaperSizes.Select(s => new { s.ID, s.Description, s.PaperWeightID }).Where(s => s.PaperWeightID == id).OrderBy(s => s.Description).ToList();
return Json(sizes, JsonRequestBehavior.AllowGet);
}
//GET LAMINATION
public JsonResult getLamination()
{
var lam = db.SheetLaminations.Select(s => new { s.ID, s.Description }).OrderBy(s => s.Description).ToList();
return Json(lam, JsonRequestBehavior.AllowGet);
}
//Dispose db
protected override void Dispose(bool disposing)
{
if (disposing)
{
db.Dispose();
}
base.Dispose(disposing);
}
}
}
當用戶點擊提交值，控制器必須採取從形式的數據，並返回了計算，而結果保持完整的表單域。
對不起，我的英文。
你可以發佈一些你的代碼請 –
非常糟糕的問題，沒有代碼。定義保存。在頁面刷新時保存，而不詢問服務器他們的值是什麼？ – XGreen