-
Notifications
You must be signed in to change notification settings - Fork 0
/
Case01.cshtml
75 lines (64 loc) · 1.64 KB
/
Case01.cshtml
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
@model Project.Models.Day18.ViewModel
<style>
[v-cloak] {
display: none;
}
</style>
<p>Day18/Case01</p>
<div id="app" v-cloak>
<form autocomplete="off"
v-on:submit.prevent="submit_form">
<p>
<label for="id">編號:</label>
<input type="number"
step="1"
min="0"
id="id"
v-model.number="vue_model.Id" />
</p>
<p>
<label for="name">姓名:</label>
<input type="text"
id="name"
v-model="vue_model.Name" />
</p>
<p>
<button type="submit">送出</button>
</p>
</form>
<p>
<a v-bind:href="prev_url">回上一層</a>
</p>
</div>
@section Scripts
{
<script>
const app = createApp({
setup(){
const post_url = '@Url.Action("PostCase01")';
const prev_url = '@Url.Action("Index", "Home")';
const vue_model = ref(@Html.Raw(Model.ToJson()));
const submit_form = function() {
fetch(post_url, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(vue_model.value),
})
.then(response => response.json())
.then(data => {
vue_model.value = data;
});
}
return {
post_url,
prev_url,
vue_model,
submit_form,
}
}
});
const vm = app.mount('#app');
</script>
}