prevent.Default()在Asp.Net Core 3.0.0 Preview-7中给出编译错误

时间:2019-07-29 12:55:32

标签: c# asp.net-core blazor-server-side

我在Preview-6中有一个拖放解决方案,该解决方案正在运行。升级到Preview-7后,我在@ondragover="event.preventDefault() statment上遇到编译错误。

我试图将event.preventDefault()放入js-function中。它没有错误消息-但是drop事件没有启动/触发。

这是正在运行的Preview-6中的代码,但在Preview 7中给出了event.preventDefault()上的编译错误


    <div class="container-fluid"
                dropzone="move"
                @ondragenter="@(e => OnContainerDragEnter(e))"
                @ondragover="event.preventDefault()"
                @ondragleave="@(e => OnContainerDragLeave(e))">

            @foreach (var felt in feltList.OrderBy(p => p.DisplayOrder))
            {
                <div draggable="true" class="bm-3" title="Felt"
                     @ondragstart="@(e => OnItemDragStart(e, felt))"
                     @ondrop="@(async (e) => await OnContainerDrop(e, felt))">

                    <div class="form-group"
                         @onclick="@((e) => SelectEditField(felt.FeltDefinitionId))">

                        <EditCard felt="@felt"
                                  fieldToEdit="@FieldToEdit"
                                  skjemaId="@SkjemaId"
                                  @OnClick="@(async () => await Delete(felt.FeltDefinitionId))">
                        </EditCard>

                        <ViewField felt="@felt"
                                   fieldToEdit="@FieldToEdit">
                        </ViewField>

                    </div>
                </div>
             }
        </div>


    @code {
        [Parameter] private string SkjemaId { get; set; }

        private string _highlightDropTargetStyle;
        private FeltDefinition itemToDropOn;
        private FeltDefinition itemToDrag;
        private FeltDefinition feltDefinition;
        protected List<FeltDefinition> feltList;
        protected Skjema skjema;
        protected int FieldToEdit;


        private void OnItemDragStart(UIDragEventArgs e, FeltDefinition dragItem)
        {
            itemToDrag = dragItem;
        }

        private void OnItemDragEnd(UIDragEventArgs e, FeltDefinition dragItem)
        {
            itemToDrag = dragItem;
        }

        private void OnContainerDragEnter(UIDragEventArgs e)
        {
            _highlightDropTargetStyle = "border:5px dashed salmon !important";
        }

        private void OnContainerDragLeave(UIDragEventArgs e)
        {
            _highlightDropTargetStyle = null;
        }

        private async Task OnContainerDrop(UIDragEventArgs e, FeltDefinition dropItem)
        {
            _highlightDropTargetStyle = null;
            itemToDropOn = dropItem;
            await ChangeDisplayNr();
        }


    }

这是相同的代码,但是我将@ondragover="event.preventDefault()"更改为js脚本。


    <div class="container-fluid"
                dropzone="move"
                @ondragenter="@(e => OnContainerDragEnter(e))"
                @ondragover="@(async (e) => await preventDefault(e))"
                @ondragleave="@(e => OnContainerDragLeave(e))">

            @foreach (var felt in feltList.OrderBy(p => p.DisplayOrder))
            {
                <div draggable="true" class="bm-3" title="Felt"
                     @ondragstart="@(e => OnItemDragStart(e, felt))"
                     @ondrop="@(async (e) => await OnContainerDrop(e, felt))">

                    <div class="form-group"
                         @onclick="@((e) => SelectEditField(felt.FeltDefinitionId))">

                        <EditCard felt="@felt"
                                  fieldToEdit="@FieldToEdit"
                                  skjemaId="@SkjemaId"
                                  @OnClick="@(async () => await Delete(felt.FeltDefinitionId))">
                        </EditCard>

                        <ViewField felt="@felt"
                                   fieldToEdit="@FieldToEdit">
                        </ViewField>

                    </div>
                </div>
             }
        </div>


    @code {
        [Parameter] private string SkjemaId { get; set; }

        private string _highlightDropTargetStyle;
        private FeltDefinition itemToDropOn;
        private FeltDefinition itemToDrag;
        private FeltDefinition feltDefinition;
        protected List<FeltDefinition> feltList;
        protected Skjema skjema;
        protected int FieldToEdit;


        private void OnItemDragStart(UIDragEventArgs e, FeltDefinition dragItem)
        {
            itemToDrag = dragItem;
        }

        private void OnItemDragEnd(UIDragEventArgs e, FeltDefinition dragItem)
        {
            itemToDrag = dragItem;
        }

        private void OnContainerDragEnter(UIDragEventArgs e)
        {
            _highlightDropTargetStyle = "border:5px dashed salmon !important";
        }

        private void OnContainerDragLeave(UIDragEventArgs e)
        {
            _highlightDropTargetStyle = null;
        }

        private async Task OnContainerDrop(UIDragEventArgs e, FeltDefinition dropItem)
        {
            _highlightDropTargetStyle = null;
            itemToDropOn = dropItem;
            await ChangeDisplayNr();
        }

    async Task preventDefault(UIDragEventArgs e)
        {
            await JsRuntime.InvokeAsync<string>("preventDefault", e);
        }


    }

和js-kode

    preventDefault = function (e) {
        e.preventDefault();
    };

0 个答案:

没有答案