locked
Get value of textbox into view component without using begin form or post RRS feed

  • Question

  • User-183185495 posted

    I have a list within a dropdown of users a person can say share a case with above that is a form field

    This is called update info and is just a text area field.

    <div class="col-md-12">
       <textarea id="updateInfo" name="updateInfo" class="form-control" rows="10"></textarea>
    </div>

    Question is without using post back or ajax postback  begin form how does one get only the value from UpdateInfo textbox to a data attritube of the anchor tag. But I can use jquery to parse the dom.

    @foreach (var allUsers in Model) {
        <a class="dropdown-item" asp-controller="MisObjects" asp-action="ShareCase"  asp-route- 
        id="@allUsers.Id.ToString()" >@allUsers.FirstName.ToUpperInvariant() 
         @allUsers.LastName.ToUpperInvariant()</a>
     }

    To overcomplicate things I have the list of users in a view component

    <li class="nav-item dropdowntest">
        <a class="nav-linkb dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Share Case
        </a>
      <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
         @await Component.InvokeAsync("ShareButtonList", new { caseId = Model.Id ,Text=UpdateInfo.Text ///how do i do this })
    
      </div>
    </li>

    The ViewComponent code

        [ViewComponent(Name = "ShareButtonList")]
        public class ShareButtonVMComponent : ViewComponent {
            private readonly IHttpContextAccessor _contextAccessor;
    
            private readonly MISDBContext db;
            private UserManager<ApplicationUser> _userManager;
    
            public int CaseId { get; set; }
    
            public ShareButtonVMComponent(MISDBContext context, IHttpContextAccessor contextAccessor, UserManager<ApplicationUser> userManager) {
                db = context;
                _contextAccessor = contextAccessor;
                _userManager = userManager;
            }
    
            public async Task<IViewComponentResult> InvokeAsync() {
    
                var items = await GetItemsAsync();
    
                return View(items);
            }
    
            private Task<ApplicationUser> GetCurrentUserAsync() => _userManager.GetUserAsync(HttpContext.User);
    
            public async Task<Guid> GetCurrentTennantId() {
                ApplicationUser usr = await GetCurrentUserAsync();
                TempData["TeannantId"] = usr?.Id;
    
                Guid.TryParse(usr?.Id, out Guid resultTennantId);
    
                return resultTennantId;
            }
    
            private Task<List<ApplicationUser>> GetItemsAsync() {
                string currentUser = GetCurrentTennantId().Result.ToString();
                var excludeCurrentUser = _userManager.Users.Where(w => w.Id != currentUser).ToListAsync();
                return excludeCurrentUser;
            }
        }

    Monday, August 10, 2020 6:18 PM

Answers

  • User475983607 posted

    I wish to map it to here i new about the val object but not how to map it to the invoke mehtod.

         @await Component.InvokeAsync("ShareButtonList", new { caseId = Model.Id ,Text=UpdateInfo.Text ///how do i do thi

    This is similar to your other question; https://forums.asp.net/t/2169656.aspx.   The Action much pass the UpdateInfo data to the main View.  The Main View passes the UpdateInfo to the View Component.  The View Component passes the UpdateInfo data to the View Component's View.

    The View Components programming pattern solves a very specific problem in MVC.  View Components create their own model without a dependency on an Action or a View.  View Components are completely independent stand-alone bits of code and UI.  Your design breaks the View Component's programming pattern by placing a dependency on the View, Action, and JavaScript/jQuery.   That's why you are having problems.  Fix the design/  Use a Partial View which excepts the model to come from the current Action.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, August 11, 2020 10:32 AM

All replies

  • User475983607 posted

    The markup you shared above runs on the server.   The result is HTML sent to the browser. 

    roguenidb

    Question is without using post back or ajax postback  begin form how does one get only the value from UpdateInfo textbox to a data attritube of the anchor tag. But I can use jquery to parse the dom.

    It is very easy to get the textarea value.  

    var val = $('#updateInfo).val();

    Setting a data attribute is equally easy.  Typically the code is executed in a JavaScript/jQuery event handler.  Unfortunate, your code is very confusing.  It is not clear how you plan to map the textarea to the bootstrap dropdown.   

    I would do this work in the server.  Anyway, IMHO there is simply not enough information to understand how your application works.  It seem like you have a chicken and the egg scenario.

    Monday, August 10, 2020 7:05 PM
  • User-183185495 posted

    I wish to map it to here i new about the val object but not how to map it to the invoke mehtod.

         @await Component.InvokeAsync("ShareButtonList", new { caseId = Model.Id ,Text=UpdateInfo.Text ///how do i do this })
    

    The markup you shared above runs on the server.   The result is HTML sent to the browser. 

    roguenidb

    Question is without using post back or ajax postback  begin form how does one get only the value from UpdateInfo textbox to a data attritube of the anchor tag. But I can use jquery to parse the dom.

    It is very easy to get the textarea value.  

    var val = $('#updateInfo).val();

    Setting a data attribute is equally easy.  Typically the code is executed in a JavaScript/jQuery event handler.  Unfortunate, your code is very confusing.  It is not clear how you plan to map the textarea to the bootstrap dropdown.   

    I would do this work in the server.  Anyway, IMHO there is simply not enough information to understand how your application works.  It seem like you have a chicken and the egg scenario.

    Monday, August 10, 2020 9:19 PM
  • User-474980206 posted

    as the textarea is entered on the client, you either make an ajax call to update the menu or use javascript (with no ajax) to update the menu. C# can only see the textarea value with a new request (ajax or post).

    Monday, August 10, 2020 10:10 PM
  • User-183185495 posted

    No pioint in just describing my problems I already no the problems Im asking how !

    as the textarea is entered on the client, you either make an ajax call to update the menu or use javascript (with no ajax) to update the menu. C# can only see the textarea value with a new request (ajax or post).

    Tuesday, August 11, 2020 7:45 AM
  • User475983607 posted

    I wish to map it to here i new about the val object but not how to map it to the invoke mehtod.

         @await Component.InvokeAsync("ShareButtonList", new { caseId = Model.Id ,Text=UpdateInfo.Text ///how do i do thi

    This is similar to your other question; https://forums.asp.net/t/2169656.aspx.   The Action much pass the UpdateInfo data to the main View.  The Main View passes the UpdateInfo to the View Component.  The View Component passes the UpdateInfo data to the View Component's View.

    The View Components programming pattern solves a very specific problem in MVC.  View Components create their own model without a dependency on an Action or a View.  View Components are completely independent stand-alone bits of code and UI.  Your design breaks the View Component's programming pattern by placing a dependency on the View, Action, and JavaScript/jQuery.   That's why you are having problems.  Fix the design/  Use a Partial View which excepts the model to come from the current Action.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, August 11, 2020 10:32 AM
  • User-474980206 posted

    No pioint in just describing my problems I already no the problems Im asking how !

    we are telling you there is no solution without changing the requirements. 

    Tuesday, August 11, 2020 3:06 PM
  • User-183185495 posted

    You where right i took the view component out of the equation and used the view bag again in a ordinary select menu I was over complicating it with the Component view it has some useses but list for grids and so forth but for an ordinary dropdown select it was over kill thanks for pointing out my design flaw.

    roguenidb

    I wish to map it to here i new about the val object but not how to map it to the invoke mehtod.

         @await Component.InvokeAsync("ShareButtonList", new { caseId = Model.Id ,Text=UpdateInfo.Text ///how do i do thi

    This is similar to your other question; https://forums.asp.net/t/2169656.aspx.   The Action much pass the UpdateInfo data to the main View.  The Main View passes the UpdateInfo to the View Component.  The View Component passes the UpdateInfo data to the View Component's View.

    The View Components programming pattern solves a very specific problem in MVC.  View Components create their own model without a dependency on an Action or a View.  View Components are completely independent stand-alone bits of code and UI.  Your design breaks the View Component's programming pattern by placing a dependency on the View, Action, and JavaScript/jQuery.   That's why you are having problems.  Fix the design/  Use a Partial View which excepts the model to come from the current Action.

    Tuesday, August 11, 2020 9:55 PM