Здравствуйте.
А как будет выглядеть сложное представление и контроллер в MVC, которое должно выполнять следующие действия?
При вводе лицевого счёта, при потере фокуса в этом поле (переходе на другое поле) данное значение передаётся на контроллер. В представлении показывается 3 кнопки до этого скрытые (Добавить, Удалить, Изменить) и если есть записи в таблице базы данных, отображать их. Если из таблицы выбираем запись, то в полях лицевой счёт, номер поля и значение отображаются выбранные из таблицы данные.
Мне непонятно как это всё реализовать.
Мои файлы.
Представление:
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
181.
182.
183.
184.
185.
186.
187.
188.
189.
190.
191.
192.
193.
194.
195.
196.
197.
198.
199.
200.
201.
202.
203.
204.
205.
206.
207.
208.
209.
210.
211.
212.
213.
214.
215.
216.
217.
218.
219.
220.
221.
222.
223.
224.
225.
226.
227.
228.
229.
230.
231.
232.
233.
234.
235.
236.
237.
238.
239.
240.
241.
242.
243.
244.
245.
246.
247.
248.
249.
250.
251.
252.
253.
254.
255.
256.
257.
258.
259.
260.
261.
262.
263.
264.
265.
266.
267.
268.
269.
270.
271.
272.
273.
274.
275.
276.
277.
278.
279.
280.
281.
282.
283.
284.
285.
286.
287.
288.
289.
290.
291.
292.
293.
294.
295.
296.
297.
298.
299.
300.
301.
302.
303.
304.
305.
306.
307.
308.
309.
310.
311.
312.
313.
314.
315.
316.
317.
@model IEnumerable<Prkorfom.Edf42Kor>
@{
ViewBag.Title = "View";
}
<style>
body {
box-sizing: border-box;
width: 100%;
height: 100%;
margin: 0;
padding: 0 20px 0 20px;
text-align: center;
background: white;
}
.scrollingtable {
box-sizing: border-box;
display: inline-block;
vertical-align: middle;
overflow: hidden;
width: auto; /*if you want a fixed width, set it here, else set to auto*/ /*IEnumerable<Prkorfom.Edf42Kor>*//* foreach (var item in Model)*/
min-width: 0 /*100%*/; /*if you want a % width, set it here, else set to 0*/
height: 188px /*100%*/; /*set table height here; can be fixed value or %*/
min-height: 0 /*104px*/; /*if using % height, make this large enough to fit scrollbar arrows + caption + thead*/
font-family: Verdana, Tahoma, sans-serif;
font-size: 15px;
line-height: 20px;
padding: 20px 0 20px 0; /*need enough padding to make room for caption*/
text-align: left;
}
.scrollingtable * {
box-sizing: border-box;
}
.scrollingtable > div {
position: relative;
border-top: 1px solid black;
height: 100%;
padding-top: 20px; /*this determines column header height*/
}
.scrollingtable > div:before {
top: 0;
background: cornflowerblue; /*header row background color*/
}
.scrollingtable > div:before,
.scrollingtable > div > div:after {
content: "";
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
left: 0;
}
.scrollingtable > div > div {
min-height: 0 /*43px*/; /*if using % height, make this large enough to fit scrollbar arrows*/
max-height: 100%;
overflow: scroll /*auto*/; /*set to auto if using fixed or % width; else scroll*/
overflow-x: hidden;
border: 1px solid black; /*border around table body*/
}
.scrollingtable > div > div:after {
background: white;
}
/*match page background color*/
.scrollingtable > div > div > table {
width: 100%;
border-spacing: 0;
margin-top: -20px; /*inverse of column header height*/
/*margin-right: 17px;*/ /*uncomment if using % width*/
}
.scrollingtable > div > div > table > caption {
position: absolute;
top: -20px; /*inverse of caption height*/
margin-top: -1px; /*inverse of border-width*/
width: 100%;
font-weight: bold;
text-align: center;
}
.scrollingtable > div > div > table > * > tr > * {
padding: 0;
}
.scrollingtable > div > div > table > thead {
vertical-align: bottom;
white-space: nowrap;
text-align: center;
}
.scrollingtable > div > div > table > thead > tr > * > div {
display: inline-block;
padding: 0 6px 0 6px; /*header cell padding*/
}
.scrollingtable > div > div > table > thead > tr > :first-child:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 20px; /*match column header height*/
border-left: 1px solid black; /*leftmost header border*/
}
.scrollingtable > div > div > table > thead > tr > * > div[label]:before,
.scrollingtable > div > div > table > thead > tr > * > div > div:first-child,
.scrollingtable > div > div > table > thead > tr > * + :before {
position: absolute;
top: 0;
white-space: pre-wrap;
color: white; /*header row font color*/
}
.scrollingtable > div > div > table > thead > tr > * > div[label]:before,
.scrollingtable > div > div > table > thead > tr > * > div[label]:after {
content: attr(label);
}
.scrollingtable > div > div > table > thead > tr > * + :before {
content: "";
display: block;
min-height: 20px; /*match column header height*/
padding-top: 1px;
border-left: 1px solid black; /*borders between header cells*/
}
.scrollingtable .scrollbarhead {
float: right;
}
.scrollingtable .scrollbarhead:before {
position: absolute;
width: 100px;
top: -1px; /*inverse border-width*/
background: white; /*match page background color*/
}
.scrollingtable > div > div > table > tbody > tr:after {
content: "";
display: table-cell;
position: relative;
padding: 0;
border-top: 1px solid black;
top: -1px; /*inverse of border width*/
}
.scrollingtable > div > div > table > tbody {
vertical-align: top;
}
.scrollingtable > div > div > table > tbody > tr {
background: white;
}
.scrollingtable > div > div > table > tbody > tr > * {
border-bottom: 1px solid black;
padding: 0 6px 0 6px;
height: 20px; /*match column header height*/
}
.scrollingtable > div > div > table > tbody:last-of-type > tr:last-child > * {
border-bottom: none;
}
.scrollingtable > div > div > table > tbody > tr:nth-child(even) {
background: gainsboro;
}
/*alternate row color*/
.scrollingtable > div > div > table > tbody > tr > * + * {
border-left: 1px solid black;
}
/*borders between body cells*/
</style>
<div class="scrollingtable">
<div>
<div>
<table border="1">
<thead>
<tr>
<th></th>
<th></th>
<th><div label="Лицевой счёт"></div></th>
<th><div label="№ поля"></div></th>
<th><div label="Значение"></div></th>
<th><div label="ДАТА"></div></th>
<th><div label="Казахский"></div></th>
<th><div label="На 1 число"></div></th>
</tr>
</thead>
@foreach (var item in Model)
{
< tbody >
< tr >
< td >
@Html.ActionLink("Выбор", "Index", new { id = item.id })
</ td >
< td ></ td >
< td >
@Html.DisplayFor(modelItem => item.lsh)
</ td >
< td >
@Html.DisplayFor(modelItem => item.n_pol)
</ td >
< td >
@Html.DisplayFor(modelItem => item.pol)
</ td >
< td >
@Html.DisplayFor(modelItem => item.datav)
</ td >
< td >
@Html.DisplayFor(modelItem => item.kaz)
</ td >
< td >
@Html.DisplayFor(modelItem => item.prtek1)
</ td >
</ tr >
</ tbody >
}
</ table >
</ div >
</ div >
</ div >
<div id="P3">
<div style="clear:both"></div>
<div style="float:left">
<table>
<tr>
<td><b><button name="Button3" id="Button3" onclick="SaveData3();" />Добавить</button> </b></td>
<td><b><button name="Button4" id="Button4" onclick="SaveData4();" />Изменить</button> </b></td>
<td><b><button name="Button5" id="Button5" onclick="SaveData5();" />Удалить</button> </b></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</div>
</div>
< div id = "MainContent_Panel1" style = "border-style:Solid;height:2061px;width:482px;" >
<span id="MainContent_Label1">Лицевой счёт</span>
<input name="ctl00$MainContent$TextBox1" type="text" id="MainContent_TextBox1" style="height:20px;width:99px;margin-left: 0px" />
<input id="MainContent_CheckBox2" type="checkbox" name="ctl00$MainContent$CheckBox2" /><label for="MainContent_CheckBox2">На 1 число</label>
<div class="row">
<div class="col">
<span id="MainContent_Label2" class="col-md-4">№ поля</span>
</div>
<div class="col">
<input name="ctl00$MainContent$TextBox2" type="text" id="MainContent_TextBox2" style="width:122px;" />
</div>
</div>
<div class="row">
<div class="col">
<span id="MainContent_Label3" class="col-md-4">Значение</span>
</div>
<div class="col">
@Html.TextArea("v")
</div>
</div>
</div>
Контроллер:
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
public class Edf42Controller : Controller
{
private Mkorform db = new Mkorform();
// GET: Edf42
public ActionResult Index()
{
// ViewData["d1"] = "";
// ViewData["d2"] = "";
// ViewData["d3"] = "";
return View(db.Edf42Kor.ToList());
}
// GET: Edf42
public ActionResult Index(int id)
{
// ViewData["d1"] = db.Edf42Kor.Find(id).lsh;
// ViewData["d2"] = db.Edf42Kor.Find(id).n_pol ;
// ViewData["d3"] = db.Edf42Kor.Find(id).pol ;
return View(db.Edf42Kor.ToList());
}
// GET: Edf42/Details/5
public ActionResult Details(int id)
{
return View();
}
// GET: Edf42/Create
public ActionResult Create()
{
return View();
}
// POST: Edf42/Create
[HttpPost]
public ActionResult Create(FormCollection collection)
{
try
{
// TODO: Add insert logic here
return RedirectToAction("Index");
}
catch
{
return View();
}
}
// GET: Edf42/Edit/5
public ActionResult Edit(int id)
{
return View();
}
// POST: Edf42/Edit/5
[HttpPost]
public ActionResult Edit(int id, FormCollection collection)
{
try
{
// TODO: Add update logic here
return RedirectToAction("Index");
}
catch
{
return View();
}
}
// GET: Edf42/Delete/5
public ActionResult Delete(int id)
{
return View();
}
// POST: Edf42/Delete/5
[HttpPost]
public ActionResult Delete(int id, FormCollection collection)
{
try
{
// TODO: Add delete logic here
return RedirectToAction("Index");
}
catch
{
return View();
}
}
}
