ExtJS 6.0使用Rest Proxy无法传递正确ID至Web API的问题

问题原因 #

ExtJS的Rest Proxy默认使用模型的idProperty（默认值为id）构建删除请求的URL路径。你的模型主键是Movie_id，但未显式指定idProperty，导致Proxy使用模型内部生成的标识（如MovieModel-75）代替实际的Movie_id值，最终请求URL不符合Web API路由要求，引发参数为空的错误。

解决方案 #

1. 为模型指定主键字段 #

在MovieModel中添加idProperty配置，明确告知ExtJS主键为Movie_id：

Ext.define('Movie.model.MovieModel', {
    extend: 'Movie.model.Base',
    idProperty: 'Movie_id', // 指定主键字段
    fields: [
        { name: 'Movie_id', type: 'int' },
        { name: 'Movie_name', type: 'string' },
        { name: 'Movie_details', type: 'string' },
        { name: 'Movie_release', type: 'string'},
        { name: 'Movie_url', type: 'string' },
        { name: 'Movie_price', type: 'int' },
        { name: 'Rent_day', type: 'string' }
    ]
});

2. 简化删除逻辑（可选） #

原删除代码可简化，无需重复查找记录：

var data = store.findRecord('Movie_name', name);
if (data) {
    store.remove(data);
    store.sync();
}

3. 验证Proxy配置（无需修改） #

你的Proxy的destroy URL为https://localhost:44369/Movies/DeleteMovie，Rest Proxy会自动在URL后拼接Movie_id值，生成符合Web API路由[Route("Movies/DeleteMovie/{id}")]的请求地址（如https://localhost:44369/Movies/DeleteMovie/123），无需额外调整。

原问题代码及报错信息 #

我的模型 #

Ext.define('Movie.model.MovieModel', {
    extend: 'Movie.model.Base',

    fields: [
        { name: 'Movie_id', type: 'int' },
        { name: 'Movie_name', type: 'string' },
        { name: 'Movie_details', type: 'string' },
        { name: 'Movie_release', type: 'string'},
        { name: 'Movie_url', type: 'string' },
        { name: 'Movie_price', type: 'int' },
        { name: 'Rent_day', type: 'string' }
    ]
});

我的Store及URL配置 #

Ext.define('Movie.store.MovieStore', {
    extend: 'Ext.data.Store',
    alias: 'store.movie',
    storeId: 'movieStore',
    model: 'Movie.model.MovieModel',
    Fields: ['Movie_id', 'Movie_name', 'Movie_details', 'Movie_release', 'Movie_url', 'Movie_price'],
    proxy: {
        type: 'rest',
        url:'/api/Movies',
        disableCaching: true,
        useDefaultXhrHeader: false,
        api: {
            create: 'https://localhost:44369/Movies/AddMovie',
            read: 'https://localhost:44369/Movies/GetMovie',
            update: 'https://localhost:44369/Movies/EditMovie',
            destroy: 'https://localhost:44369/Movies/DeleteMovie'
        },
        reader:{
            type:'json',
            headers: { 'Accept': 'application/json' }            
        },
        writer: {
            type: 'json',
            writeAllFields: false,
        }
    }, 
    autoLoad: true
});

删除记录的控制器代码 #

var data = store.findRecord('Movie_name', name);
var id = data.get('Movie_id');
store.remove(store.findRecord('Movie_id',id,0,false,false,false));
store.sync();

我的Web API代码 #

[Route("Movies/DeleteMovie/{id}")]
[EnableCors("*", "*", "*")]
[System.Web.Http.AcceptVerbs("Delete", "Post","Get")]
[System.Web.Http.HttpDelete]
public IHttpActionResult DeleteMovie(int id)
{
    if (!ModelState.IsValid)
    {
        return BadRequest(ModelState);
    }
    Movie movie = db.Movie.Find(id);

    db.Movie.Remove(movie);
    db.SaveChanges();

    return Ok(movie);
}

报错信息 #

控制台报错如下：

$id: 1
Message: 请求无效。
Message Detail: 参数字典包含针对方法System.Web.Http.IHttpActionResult DeleteMovie(Int32)（位于MovieRentals.Controllers.MoviesController）的非可空类型System.Int32参数id的null项。可选参数必须是引用类型、可空类型或声明为可选参数。

内容的提问来源于stack exchange，提问作者Bryan art