RazorPage 小测试，作下记录

@page
@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
@{
}
@functions{
public AppInfo item { get; set; }

public void OnGet([FromQuery] Guid Id) {
item = App.GetItem(Id) ?? new AppInfo();
item.Location = "111";
item.Title = "1";
}

public APIReturn OnPost() {
item = new AppInfo();
foreach (var f in Request.Form) item[f.Key] = f.Value;
var a = item;
return APIReturn.成功.SetData("item", a, "title", item);
}
}

<form method="POST">
<div>Description: <input asp-for="item.Title" /></div>
<input type="submit" value="Save Second" class="btn btn-primary btn-xs" />
</form>

<div id="mainvue">
<table cellspacing="0" rules="all" class="table table-bordered table-hover" border="1" style="border-collapse:collapse;">
<tr v-if="item.Id">
<td>id</td>
<td><input v-model="item.id" type="text" readonly class="datepicker" style="60%;background-color:#ddd;" /></td>
</tr>
<tr>
<td>默认渠道id</td>
<td>
<select v-model="item.default_merchant_id">
<option value="">------ 请选择 ------</option>
@foreach (var fk in Channel_merchant.Select.ToList()) {
<option value="@fk.Id">@fk.Title</option>}
</select>
</td>
</tr>
<tr>
<td>描述</td>
<td><textarea v-model="item.description" style="100%;height:100px;" editor="ueditor"></textarea></td>
</tr>
<tr>
<td>地址</td>
<td><input v-model="item.location" type="text" class="datepicker" style="60%;" /></td>
</tr>
<tr>
<td>负责人名</td>
<td><input v-model="item.manager" type="text" class="datepicker" style="60%;" /></td>
</tr>
<tr>
<td>old_id</td>
<td><input v-model="item.old_id" type="text" class="form-control" data-inputmask="'mask': '9', 'repeat': 6, 'greedy': false" data-mask style="200px;" /></td>
</tr>
<tr>
<td>省区域</td>
<td><input v-model="item.province" type="text" class="datepicker" style="60%;" /></td>
</tr>
<tr>
<td>状态</td>
<td>
<select v-model="item.row_state">
<option value="">------ 请选择 ------</option>
@foreach (object eo in Enum.GetValues(typeof(Et_row_stateENUM))) {
<option value="@eo">@eo</option>}
</select>
</td>
</tr>
<tr>
<td>手机</td>
<td><input v-model="item.telephone" type="text" class="datepicker" style="60%;" /></td>
</tr>
<tr>
<td>机构抬头名称</td>
<td><input v-model="item.title" type="text" class="datepicker" style="60%;" /></td>
</tr>
<tr>
<td>所属用户id</td>
<td><input v-model="item.xuser_id" type="text" class="datepicker" style="60%;" /></td>
</tr>
<tr v-if="item.Id">
<td>创建时间</td>
<td><input :value="item.create_time" type="text" readonly class="datepicker" style="20%;background-color:#ddd;" /></td>
</tr>
<tr>
<td>更新时间</td>
<td><input :value="item.update_time" type="text" readonly class="datepicker" style="20%;background-color:#ddd;" /></td>
</tr>
<tr>
<td width="8%">&nbsp</td>
<td><input type="button" @@click="save" />&nbsp;<input type="button" value="取消" /></td>
</tr>
</table>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
function ajaxRequest(type, url, data, callback, failCallBack) {
type = String(type || 'GET').toUpperCase();
if (type == 'GET') {
var dataStr = ''; //数据拼接字符串
Object.keys(data).forEach(key => {
if (Object.prototype.toString.call((data[key])) == '[object Array]') {
for (var a = 0; a < data[key].length; a++)
if (data[key][a] !== undefined) dataStr += key + "=" + data[key][a] + "&";
}
if (data[key] !== "" && data[key] !== null) dataStr += key + '=' + data[key] + '&';
})

if (dataStr !== '') {
dataStr = dataStr.substr(0, dataStr.lastIndexOf('&'));
url = url + '?' + dataStr;
}
}
var sendData = '';
var contentType = 'application/x-www-form-urlencoded; charset=utf-8';
if (type == "FORM") {
for (var key in data) {
if (Object.prototype.toString.call((data[key])) == '[object Array]') {
for (var a = 0; a < data[key].length; a++)
if (data[key] !== undefined) sendData += key + "=" + data[key][a] + "&";
}
else if (data[key] !== "" && data[key] !== null) sendData += key + "=" + data[key] + "&";
}
}
if (type == 'JSON') {
sendData = JSON.stringify(data);
contentType = "application/json; charset=utf-8";
}
if (!failCallBack) failCallBack = console.log;
var requestObj = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject;
requestObj.onreadystatechange = () => {
if (requestObj.readyState == 4) {
if (requestObj.status == 200) {
var obj = requestObj.response
if (typeof obj !== 'object') obj = JSON.parse(obj);
if (obj.code === 0) return callback(obj.data);
failCallBack(obj);
} else {
failCallBack(requestObj)
}
}
};
requestObj.open(type == 'GET' ? type : 'POST', url, true);
requestObj.setRequestHeader("Content-type", contentType);
requestObj.setRequestHeader("token", 111);
requestObj.setRequestHeader("appid", 22);
requestObj.send(sendData || null);
}

var vue = new Vue({
el: '#mainvue',
data: {
item : @Json.Serialize(item)
},
components: {
},
computed: {
},
created: function () {
var _self = this;
'@Html.AntiForgeryToken()'.replace(/ value="([^"]+)"/, function ($0, $1) {
_self.item.__RequestVerificationToken = $1;
});
},
methods: {
save: function () {
ajaxRequest('JSON', '', this.item, function (data) {
debugger
var json = data.body;
this.data = eval("(" + json + ")");
}, function (response) {
console.info(response);
})
}
}
});
</script>